I made a website (not yet online), it uses HTML, CSS, Javascript, only. No React or Angular, and I have the following problem :
I'd like to make a cross-platform application based on it (for iOS, Android, Windows, Linux and MacOS).
What's the best way to do that ?
My searches :
I did few searches, not really satisfactory, because it seems I'll need to re-make my client-website entirely !
I found 2 ways : React Native and NativeScript, like described here.
Have you some other option ?
If you don't, is it really impossible to keep the code in React ? Like I can see there
I'm a bit confused, and I don't know what I should do to perform what I want.
Thank you for all answers you could give me !
For Desktop Development you can try Electron. It's a js library which helps you build cross platform applications by using Node, Chromium and js.
You can also go one step ahead and add react to it.
Applications like VSCode, Skype, Microsoft Teams, Spotify and I think even Slack are made using it.
For Mobile Development, you can go with React Native. In this way you'd make a cross platform mobile dev app too.
The pros are that using these tech stack you can build modern cross platform apps. For a web dev, this is the way to go.
The cons of Electron:
It's little heavy on memory, but nothing that would be a bottleneck.
The cons of React Native:
Is not suited for apps that require heavy computation and it's bundle size is significantly larger than the native apps
I want to add to this :There is an other option nw.js for desktop app it's like electron using chromium ,node and js.
and for the front-end you can use angular, react, vue it is really as you want .This is a link https://nwjs.io/ (It is cross-platform too ).
For mobile development I think I will recommend you : NativeScript (https://play.nativescript.org/?_ga=2.144049845.1620166462.1585302566-1314322155.1583139217) . It is a good option also cause you can easily add your website(html,css,javascript files ) in your NativeScript webview as your interface and I think this option won't take you time as making an other one with react-native (even if I know that react-native have his webview too).
So go and have a look to this ::How to load a local html file into a NativeScript webview .
Then all your work will be the database in sqlite but even for this you have :https://www.npmjs.com/package/nativescript-sqlite and other things to go quickly
:https://market.nativescript.org/
Related
Is it possible to take a desktop app made with Electron js and somehow make it work on mobile? I read it's possible to convert React applications to Electron applications and I was wondering if it's possible to do it the other way around. It's likely it might not be possible to convert it 1:1 because of native functions etc. probably.
I haven't tried anything because I doubt it's possible - I just want confirmation.
Depends on what it does. If the functionality would work equally well on a website inside a browser then yes. You'll just need to store data somewhere else than on user's file system. But if the electron app uses native or node features, like accesses local files, then probably not so easily.
I am new to react native I want to know can we able to share the same code base for web-based and for the mobile application using react native.
If yes then how to do that?
I think you're referring to using React to build a web application and then wondering if you can port it to React-Native? You can share the same idea's, method, and architecture. But no, the code doesn't translate 100%, really not even 50%. React vs React-Native use different things, for example React uses < Div >'s while React-Native uses < View >'s, img to < Image >, etc. So while figuring out many of the design questions and implementation for the web version will surely make your RN development faster. You still need to plan on the RN port being the same Development process (plus longer for bug testing on the many different devices) and allow a developer adequate time.
The answer is yes. You can share the same code using react-native-web.
But keep in mind that the idea behind React and React Native projects is that you could learn one time and use everywhere so their goal is to make possible to use a very similar architecture, data flow, etc. but not sharing the same code. Also, a lot of packages and third-party components will not work as expected. So, react-native-web is a very interesting project and you should definitely give it a chance, but most of the times it will not do the job 100%.
I created many Ionic apps, using all it's versions, from 1.x to the latest 3.x
All along with cordova, and AngularJS, it's a great framework, with big community, it's getting better and better over time.
But it's still an hybrid working over a WebView ..
With my knowledge to AngularJS, should i move easily to NativeScript, or start over with ReactNative ? from what i've seen ReactNative has better community, and many big apps are in it's showcase.
So, for cross-platform apps, should i keep working on Ionic, go with NativeScript, or move to ReactNative ?
Its good to know you are interesting in joining to the cause of creating native apps using JavaScript. You are in the right direction, both Nativescript and React Native will guide you to your goal: Build professional applications for iOS/Android using Javascript, however there are some differences you should know at the time you decide which framework to use.
React Native:
Its a framework developed by Facebook, using React it renders true native views. It uses Flexbox to decorate the apps so if you never used it that will be a new challenge for you, it is not hard to learn. My problem with this is that there is no direct support from the developer team, and only the community is from where you get the help, and sometimes it is not quite accurate. To create iOS apps you need a Mac computer, otherwise you can only create apps for Android. As far as I know, some basic information you might need in your app, such like platform, OS version, portrait/landscape it is developed by plugins from the community, and this information is not coming from the framework itself.
NativeScript:
Its created by Telerik, a very strong programming company who has high quality developers and strong support for its products. It uses Angular as a option to create your apps and its very well documented. If you are a good CSS developer you will be fine because they uses CSS to decorate your app. Nativescript community has developed tons of plugins. Nativescript core team is creating a lots of tools to help you through the process. Recently they launched a tool called Sidekick, which allows you to build/livesync your app from the cloud, which means you do not need a Mac computer for create iOS apps (isn't that cool?). With Nativescript you can choose Javascript, Typescript or Angular+Typescript, all of them will end up creating native apps. For support, you can contact the core team directly, and they will give you the best answer you can have, this is one of their goals.
I hope I have answered your question.
Thanks!
I don't know about React Native, but we have a great community with NativeScript. Hop on our Slack channel and meet the fam!
I am working on a pet project ( web application ) and I was wondering if I should use react because it would be easy to create native apps from this code (in future if I need to).
And if the answer is yes, what are the best practices to follow for
most resuse?
If the answer is no, can you recommend an alternative?
Some more information about my situation.
I am relatively new to react and my alternative will be good ol' html with bootstrap and jquery. I am considering using asp.net mvc and web api.
Sharing app logic between a React Web app and a React Native app, while keeping the individual component rendering unique to each platform is possible!
In my opinion, it is a great option we have available. I will give you an overview of the approach and a few advices.
In an ideal world, we would be able to share 100% of the code. As far as I know, that isn't possible, but still we can share a lot of the code. Although React Native is like React, it is very important to note that the rendering code is different. Instead web things like <div> or <span>, you use React Native components like <View>, <Text> and other built-in components.
However, the business logic in most cases is just JavaScript though and that's one of the important things which we can share!
The plan
Based on the Flux architecture you are using, it would mean that your store(s), reducers, actions would be shared code, as well as most of the business logic (inside services or whatever) and the constants and utilities too.
The UI layer would then be written specifically for each native platform using React Native and for web using React. Not only because it’s necessary to replace the HTML elements with React Native components, but also because the components will probably have a very different behavior on the mobile app.
Some General Guidelines / Advices
Consider a good architecture and code structure in order to share as much code (and application logic) as possible. Try to separate the UI presentation components (which will be different for each platform).
Take a look at the JavaScript Environment specifics in the React Native docs. When using React Native, you're going to be running your JavaScript code in two environments:
On iOS simulators and devices, Android emulators and devices. React Native uses JavaScriptCore which is the JavaScript engine that powers Safari. On iOS JSC doesn't use JIT due to the absence of writable executable memory in iOS apps.
When using Chrome debugging, it runs all the JavaScript code within Chrome itself and communicates with native code via WebSocket. So you are using V8.
While both environments are very similar, you may end up hitting some inconsistencies.
Consider the different strategies for sharing the code. In order to accesses shared code, the apps you're building doesn't have to all live in the same codebase or git repository.
More realistically, you would have two or more projects hosted separately, so an npm package is one of the easiest ways to share code between them.
This is easy as making a new package and setting it as a dependency inside each of your projects. For the path to the shared project, you can use a git repository rather than pointing to a public package on npm.
Even though you're building only the web app now, you could spend some time thinking about how you could generalize some of the shared code, so it is easier to re-use it in future.
It's possible and viable. You must have a view for each platform (web/android/ios), because each one have your components..
The business logic must be out of the view. Use flux can easy your project with native, because the it move the api interaction to a data layer, letting the view be just a view.
Got a problem, and I am pretty sure there is a solution for this.
Currently we have a Website that sells goods & integrates with a thirty party for shopping cart. The shopping cart integration is through standard web re-direct.
Product works well on desktop browser. Its not that bad on browsers on tablets. Not so great on phone browsers. The problem on mobile device is for obvious reasons, as the pages are optimized.
The standard approach we can do is go about optimizing for mobile browsers, and be happy. My team is flying with optimizing for mobile web, because they think apps will be very difficult to do.
If we choose to go the native app model, is developing a library or package for each platform the only way? I am thinking, no in current world with so much technology advancement. I am not a fan of browser view on device, not the smooth experience.
Are there other options available? I was looking at HTML5 hybrid applications, but can't put a finger to be sure that will work for what I am looking for.
Frameworks aside, often times you can use a stylesheet meant for mobile devices and hide everything that is not absolutely vital. You could also consider WML, but I think you could live without it IMAO.
Writing apps for the iOS will require an investment in Apple developer tools and training in Objective-C. Android will call for Java and Eclipse, to name a few things.
When it comes to "native apps", you will need to code for whatever platform you are depending on. The number of platforms you work with is entirely up to you, but yes, each new platform may require a different implementation.
Personally, I would add some specialized markup/styles to make as many browsers as possible happy. If you want to expand, try to see where your target audience really lies and reach out to them on any medium you can afford to build on. I would zone in on specialized applications if there are benefits really worth chasing down that road.
Hybrid applications is a good option, but probably the devil in a box.
The hybrid approach with HTML5 fits your developer, because they will still use HTML, CSS and JS (e.g. with PhoneGap), but on the other hand you will get an medium satisfying UI (what you said you are not a fan of).
Pure native applications is probably a bit too much of all good, if your web app runs fine in a browser.
A way could be to go with compiled hybrid and cross-platform compatible solutions like xamarin or appcelerator, especially appcelerator uses JS, which is an advantage for you. This could result in a native UI (implemented in JS) and shared business logic code. So there are two benefits for you; first, just use JS, second, shared business logic code -> less work.
Other alternative would be to go with responsive or adaptive websites, realized with the help of CSS.
If you are looking for developing a hybrid app (phonegap + angularJS + backend), I would like to recommend Monaca. I've just recently discover it. It is very cool since it has phonegap inside its framework and its own backend. Moreover, it also has a fast and lightweight UI framework called OnsenUI which is based on Topcoat and AngularJS.
Even it is a hybrid app but it will give users the native application feel since it also provides native components to use in your hybrid apps. What is impressive about it, you don't even need to build and install your app to your device every time during development. That's what I love the most about this.
I hope it helps since I think it is just like what you are asking for. I'm just a novice developer and I find it is very easy to use.