I have implemented a web tool with an UI written in Vue 2.
Now I would like to port this UI to a React Native app on iOS and Android without the need to re-implement it from scratch.
What I have tried until now is to build Web Components and include it into the React Native code, but without success.
The alternatives I am aware of are:
Build an Progressive Web App to get rid of this cross platform use case
Build both Web and native app with Flutter
Separate the UI from the logic (e.g. with MVVM pattern) to easily exchange the UI but use the same model and business logic
All of these three options are a bit too late for me because the View app already exists ;-)
Could you please help me to figure out which is the best option to easily reuse your View UI in a React Native app.
Thanks a lot in advance.
Related
I started learning ReactJs and I realized that making complex UI is Ok in react and I can implement any design that I want but when it comes to android I can't figure out how to make those complex designs without losing performance and encountering with bugs. So is there any thing that I should learn to feel free to design in android and customize UI in whatever way I want like doing css stuff in react? or should I learn react native? I spent months to learn android and it is hard for me to change my plan to develop react native apps.
If you want to stay with ReactJs you should study only React native that allows you develop apps will works in both IOS and Android, for a perfect design you can use a live tool like Expo.
Actually the general concept of developing mobile apps by using react native and reactJS are same. You write the JSX on both platform. The only major difference is that the rendering mechanism that react uses is quite different from the other one.
React JS is actually front end library which is developed by Facebook and is used for handling view layer for web and mobile apps. It allows u to create reusbale UI components and is currently one of the most popular Javascript library and it has strong foundation and large community behind it.
Therefore, it completely depends upon the need of customers and the business what kind of mobile application they are looking for and is required for your business whether android or iOS.
The following is unclear to me. So far, I don't see lose Reactjs components embedded in views, but only in Single Page Applications.
I was wondering if one could use Reactjs in a Laravel application in combination with the blade template engine? I have a Laravel project and I like the way ReactJS binds to the DOM. But I do not need an entire JS SPA.
So is it possible AND a good practice to use different ReactJs components loosely in blade views? For example a React table component and a header message component, that also are able to communicate with each other.
There is a package that does just that.
However I would argue it would be a better practice if you separate the front-end and back-end completely. So you can use Laravel to serve the data using REST API endpoints and then display everything using a React app.
This way they will be loosely coupled and if you ever want to swap out one for the other (e.g. swap out React for Angular) then it would be a lot easier as your api endpoints wouldn't have to change at all.
EDIT: Some benefits of a headless CMS (taken from pantheon.io):
By shifting responsibility for the user experience completely into the
browser, the headless model provides a number of benefits:
Value: future-proof your website implementation, lets you
redesign the site without re-implementing the CMS
Sets frontend developers free from
the conventions and structures of the backend. Headless development
not only eliminates “div-itis”, it gives frontend specialists full
control over the user experience using their native tools.
Speeds up the site by shifting display logic to the client-side
and streamlining the backend. An application focused on delivering
content can be much more responsive than one that assembles completely
formatted responses based on complex rules. Builds true
interactive experiences for users by using your website to power fully
functional in-browser applications. The backend becomes the system of
record and “state machine”, but back-and-forth interaction happens
real-time in the browser.
Lets say you also want to build a mobile app using React Native that would use the same underlying code base as your React web app. If you have a decoupled CMS, so your backend is only serving data then you can make calls to this same backend from both your web app and mobile app without worrying about content types, response formats etc... In-fact, with React Native you can use the same React codebase for the mobile app along with the web app and you would only have to change some views around.
It's a great way to re-use your code with better modularity and seperation of concerns.
As we're building a Meteor React web application which will be presented inside a web view inside a react native application. As you can probably tell by reading that sentence, this doesn't make much sense, but due to time constraints and the fact that the react native application is made by another team, we have decided to present it in a web view for now, and eventually convert it to RN as well.
So to prevent having to write everything twice, is there a way to use React Native components in Meteor? (So use <View> for example instead of <div>).
If you want to go down this path, you can use react-native-web to build React Native components for the web.
Just want to warn that while building your web client with RN components will definitely help you transition, you will still pretty much have to scrap all your client side Meteor logic when you transition later. The best RN meteor client currently is react-native-meteor and is more of a proof of concept than anything -- trying to emulate key features of Meteor with a wrapper using a DDP client, but definitely not there yet.
So in the end, you're going to put in some serious hours making the conversion later or scrapping Meteor altogether when you go full native. If you're a fan of Meteor, I would suggest trying apollo made by the folks at Meteor and works out of the box with RN. You can still get all the best features of Meteor like reactive data, optimistic UI, subscriptions, etc. and the learning curve is pretty mild.
I am new to React JS. I am trying to build a web application which should also work on mobile (Android and IOS) so thought of using react js for web application and created few components. so is it possible to use the React js component in React native.
It's good that you plan in advance. 100% matching between JS and Native won't be possible, but with careful planning, you could get to reuse a good deal.
You may want to take a look at React Native Web project that mirrors Native-specific components for Web (e.g. View, Image, Text, etc).
I suggest building a simple prototype in React JS and then in React Native so you get some understanding of the differences in the two ecosystems. Having a hands on experience will prove more beneficial than any writeup :)
ReactNative is a set of real native Components like View, TextInput TouchableHighlight and more. It is also a platform which let you run javascript code to control these.
There is no WebView like in Cordova, what you get is a native App with native views.
But that means, that you can still have some or your domain logic written in JS which you can use the same way in your Web App.
For example you have a Login Screen for iOS, but all the necessary stuff for your server calls, can go into a separate module e.g. api/auth.js, which is shareable between web, ios, android, iot.. what ever.
I want to reuse some code that retrieves data from an API for two apps. One is an iOS app using React Native. The other one is a website using React.js.
I initially coded the class that retrieves data from an API when I built the iOS app. Thus, I used the fetch method available in React Native.
Unfortunately, there isn't such a method in React.js.
My best option if I want to reuse my code is to abstract the call of the React Native's fetch method by creating a class HTTPRequests with a method fetch which will call the React Native's fetch method or the '$.get' method depending on the lib used by the project: React.js or React Native.
My question is the following: How can I detect the using of React.js or React Native in my project. My first idea is to detect if my JS code is executed through RCTRootView engine or a browser. But I've no idea how to accomplish this.
Any suggestion?
Thanks!
My suggestion would be to move shared logic into separate module (bower, npm, ES6), generalize the way you request data through fetch polyfill, and never ever bother with detecting React/React.native in your project. JS code detection will make your code unnecessary complicated and hard to support when new versions of React/React.native will come up.
I have successful experience of building a cross-platform application with React and React Native using the platform-specific extensions feature of React Native. I've just described how I structured the code in order to achieve that in a blog post Code sharing between React and React Native applications