is there any boilerplates for a reactjs and react-native [closed] - reactjs

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 5 years ago.
Improve this question
we are starting a new webapp using reactjs, the main reason why we chose react is because of react-native !, the app will be password protected, so we are not going to utilize and seo or server rendering features.
i find most boilerplates for react focus on universal setup yet in my case i want to structure app to sharing most amount of code possible between web and mobile apps
we started our webapp using https://github.com/mxstbr/react-boilerplate
is there a production ready boilerplate/starter that can be used in such use case ?

I think you're still a bit premature to try to share a lot of code between React and React Native. Ben Alpert, one of the React core team members at Facebook, said this in a recent AMA:
Over time, maybe we can share view code between native and web too. There are some cool projects in the community like react-native-web (https://github.com/necolas/react-native-web) which try to make this possible. We don't have anything to show at Facebook yet down this road but maybe in a year or two we could officially support using View, Image, and Text on the web for people who want to.
(emphasis mine)
For React Native, I would recommend taking a look at Ignite by Infinite Red (disclaimer: I'm one of the owners of Infinite Red). It gives you a great starting point and provides a lot of tools (including the fantastic Reactotron) to get you on your way.

Create React App is the best way to start building a new React single page application. It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production.
Create React Native App is the easiest way to start building a new React Native application. It allows you to start a project without installing or configuring any tools to build native code - no Xcode or Android Studio installation required.

Related

Will Microsoft abandon office add-ins? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
I am already trying to develop Office-Addins for more than a year time (side projects needed for work but not a core business). Sadly, I am still feeling like an absolute noob. I tried to research all courses, documentations and SO questions about the matter but it looks like I just cannot advance. I am thinking that Microsoft will abandon Microsoft Add-ins. I tried to contact Microsoft and the developer program always points me to stack overflow So I did not know how to reach out. But I got the impression that the support for Add-ins is really weak and well because of the following reasons:
The Yeoman scaffolding for TypeScript React is really outdated and does not support Functional components but is required if you want to use Fluent UI React framework.
In my version of Windows 10, 2004, it is still not possible to see the developer tools but you stil need the beta Dev Edge DevTools, which remain in beta.
Decent debugging of Excel Add-ins with TypeScript React in VS code with breakpoints is impossible to get working (also when using office debugger because it crashes excel so dramatically that a forced shutdown of excel is needed.
every time something goes wrong with your TypeScript code, the Edge Dev tools tell you that the office.initialize is not properly loaded. So the user is completely on his own.
SPFx is promoted everywhere and on Pluralsight they say that an Add-in runs in an iFrame and that is limited.
I have multiple questions:
How to transform the Class component from the Yeoman generator to a fully functional component?
if you go to the App.tsx file you will see this code:
export default class App extends React.Component<AppProps,
constructor(props, context) {
super(props, context);
}
But when I remove context, it does not work anymore. What is this context? Is this the Excel API?
How to get EdgeWebview2 to work? I have seen demo's but I cannot find the settings to change it?
Is it possible to have breakpoints with EdgeWebview2?
Does EdgeWebview2 give better feedback about what is wrong with your code?
Does a Excel Addin work together with SPFx?
many thanks for your explanation.
Thanks for the question and feedback. There's a few parts to your questions so I'm hoping I can help, as I work on the Excel extensibility platform.
a) If you're looking to build an add-in for Excel and work on cross platform, we would recommend you start with building web add-ins and use the resources here: https://aka.ms/office-add-ins.
b) In terms of "will we abandon office add-ins"? No, we are continuing to invest in our Javascript add-ins. To learn about the latest on the Excel side, you can see our Ignite video here (https://www.youtube.com/watch?v=6IZjQQ9Kr2o), or attend our community calls: https://aka.ms/officeaddinscommunitycall (which happen second wednesday of every month at 08:00 PST).
b) In terms of getting started,
If you were getting started, checkout the quick start here: https://learn.microsoft.com/en-us/office/dev/add-ins/quickstarts/excel-quickstart-react
it sounds like you have tried some of our tools (Yeoman) but are hitting issues. For these, we have an active github channel. I'd suggest logging an issue there: https://github.com/officedev/office-js/issues. Can you log an issue on some of the challenges you are hitting and we can investigate (may be likely after the holidays)?
c) For your questions on Edge, the EdgeWebview2 runtime is currently rolling out to the monthly channel builds. You can find more information here: https://developer.microsoft.com/en-us/office/blogs/office-add-ins-community-call-november-11-2020/, and we'll definitely post news about it once it does become available. Until then, you do have to use the beta channel for Windows.
Thanks!

Is react-native good for both web development and mobile development [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed last month.
Improve this question
I have to do a project that includes a mobile app and a web app. So I choose the React.js for the web application and the react-native for the mobile app. Both mobile and web have the same functionalities. If I choose react native for both, is it better or not.
As well as I want to know, although the functionalities of mobile and web app are different, is it better to use React Native for both?
It depends on your requirements and choice.
React Native supports for the Web from version >= 0.60. If both of your mobile application and Web application will have almost the same features, then go for React Native for Web. Then you can write your code once and use it on all Android, iOS, and Web platforms. You can save your time a lot in that case.
But, if your web application will have different functionalities, I recommend you to go with React JS. You can use wonderful libraries such as material-ui for your UI designs.
Like that, both options have pros and cons. So, it depends on your requirements and choice.
React Native for Web can allow you to run the same codebase you use iOS/Android to also run on web. What is does is to add relatively thin compatibility layer on top of outputted DOM elements that simulates the behaviour natively implemented by iOS/Android. Typical use-case would be to run the same codebase on web and mobile. There are of course certain limitations of that compatibility layer as not all mobile features can be easily replicated in the browser.
In case you are building different kind of app for web than for mobile, then you should be better of with regular React, as it will give you full control over generated DOM.

Is it better to develop a social mobile app like Twitter using Hybrid or Native development? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 5 years ago.
Improve this question
If you are going to develop a social mobile app like Twitter, is it better for a social mobile app to be a hybrid or native app?
I wish there would be a simple answer.
Why Native?
Pros:
High Scalability
High Performance
Better native control over device
Cons:
High development time
UI elements are not so cool
Learning curve/Knowledge of Native C/Java (Or C# -Xamarin) required
Specific development tool/resources required
While Hybrid apps also can be an alternative then why Hybrid?
Pros:
Less development time
Better UI controls
Can have generic UI on all different device OS
Simple
Knowledge of HTML5/CSS/Jquery/AngularJs is required though
Cons:
Not great control over device specific tasks(eg. using advance camera or gallery actions requires plug-in)
Performance is slightly poor (however nowadays everyone has got decent phones with better internet)
You can browse and check for yourself what is most suitable to you:
http://appvswebsite.com/
http://www.multidots.com/difference-native-vs-hybrid-android-app-development-2/
https://www.mobiloud.com/blog/native-web-or-hybrid-apps/
For a social networking application like twitter as you've mentioned I suppose you'd want a wide variety of features in that app.
Building native apps for iOS and Android will give the freedom of adding platform specific functionalities which will in turn enhance user experience.
Some features that are used by default on most of the apps on iOS are not present in android by default. For example, swipe to delete is pretty common and default in iOS while in android people prefer long press to delete.
You won't have this freedom for user capabilities and a better user experience with hybrid apps.
On the other hand hybrid apps will be faster to develop as compared to native apps.
Another point to take into consideration would be that one would require two developers for native apps for iOS and Android, whereas a single hybrid developer for a multi-platform app.
Hybrid and cross platform apps can save you some time and money at start, but they can't match the performance, usability and sleekness of native apps, so ultimately native is the way, so if you have resources, go native.

Any good debug tutorial for React.js [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
I wonder if anyone could suggest a step by step beginner tutorial about how to debug React.js app? I am pretty new to React, right now the most annoying thing is there are a lot error shown up in the console but I have no idea how to trace them back.
It's difficult to describe a general strategy to debug "a lot error shown up" so I will walk you through the process for debugging component level errors:
Install the React dev tools extension for your browser of choice:
Chrome
Firefox
Find the component
I recommend either of these paths:
2.a. Open React tab from your browser dev tools and type in the bottom search bar to lookup components by name.
2.b. Open Elements tab, select some element, and switch back to React. The component hierarchy will be expanded up until the React component matching the DOM node you selected in Elements.
Inspect the state and props of the component that is behaving incorrectly.
If for some reason you don't like installing browser extensions, you can throw one or more debugger; statements to set breakpoints that will "pause" the execution of your app and let you inspect the call stack, scope, and errors at these points.
React has its own debug tool installed in chrome dev tools. It is the most appropriate tool at the moment for debugging react apps. It allows you to add break-points, edit your props in the dev tools and see instant results. A good tutorial is this https://facebook.github.io/react/blog/2014/01/02/react-chrome-developer-tools.html, which is the official tutorial for debugging React. You can also download the extension "React Developer Tools" which will install the react dependencies on your developer tools in chrome.
You can also use the standard chrome debugger without the React dependency, which also works well. A good tutorial for debugging in Chrome is this: https://developers.google.com/web/tools/javascript/index?hl=en
The main issue is to learn how to add a break-point into your code via the dev tools and learn how to identify the problems via the responses you get from them. The last tutorial shows you really well how to do that.
I hope that helps a bit and happy coding!

RobotFramework vs Protractor for AngularJS Testing [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 8 years ago.
Improve this question
I am trying to finalize a tool for testing an AngularJS based web portal.
I have explored Protractor and was quite sure of using it for AngularJS tests until someone from the team came up with a suggestion of using Robot Framework.
So, Now I need to compare Protractor with Robot Framework.
Protractor has an advantage of having customizations available for AngularJS. However, I would agree that the learning curve is not too smooth because of the terminology and concepts (Promises and Control Flow) used.
Now I need to understand how good is Robot Framework for AngularJS testing. Is there anything one would miss regarding Protractor if switched to Robot Framework? Please provide your valuable inputs for the same.
Learning curve
IDEs available
Ease of automating AngularJS UI tests
Any other relevant points you feel are important!
Being in the middle of exactly such debate right now, I can tell you a few things:
AngularJS has a "loading" issue. Protractor solves that issue by giving you the function WaitForAngularToFinish. You get other things as well from Protractor such as ByRepeatNG
Automating UI by Robot Framework is done using Selenium 2, and the robot library doesn't contain Angular Specific code (WaitForAngularToFinish)
For now we're trying the Robot Framework way
We've solved the issue in Robot by tapping into the Java Library ngWebDriver
We've created a new robot library based on ngWebDriver with autowiring (to get the Selenium2 driver from the robot library) that gives the same functionality as Protractor.
Pros to going the robot way:
Robot Framwork gives you the ability to do everything, Not just UI. So you can prepare the test environment exactly like you want it (much harder to do in Protractor)
English. The ability to let non-coders write tests (We're using Gherkin notation).
Stability (everything about NPM for example, is inherently unstable)
Cons to going the robot way:
Harder for the Javascript people to write underlying code for the tests (since some of the underlying code will be in Java)
Simplicity
Regarding you other questions:
Learning Curve - easy on both Robot and Protractor
IDEs available - I'm using a plugin for IntelliJ for Robot Framework. The enterprise version of IntelliJ (which costs a lot of money) works quite well with Protractor as an IDE.
Ease of automating AngularJS UI tests - Once you have Angular keywords in Robot, you're good. Before that, very hard.
Robot Framework is quite lightweight and learning curve is quite fast from what I could see in the different places I used it. In terms of IDEs, there are plugin for most of them (I would not recommend using RIDE if you already have a favorite IDE).
To answer question 3) and 4) I would say that it all depends on your organisation and culture. If the end-2-end tests are going to be written by the Web App Angular developer, then probably better sticking with Protractor as this is all in the JavaScript ecosystem. But if you have a separate team of QA who is in charge of testing, they might indeed find some of the protractor/javascript to be complex/heavyweight for what they have to do. With QA that are a bit less hard-core-coder than developers, I find that Python is more appropriate and easy. And in that case, Robot Framework is a very good choice.

Resources