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.
Related
Is there a way to integrate codenameone component in a native activity/fragment?.
The idea is having a codenameone library, that we use its native compilation as a library in an existing native project?
Many thanks for the reply
Maybe but probably not.
Codename One was very much designed to take over. The reason is that cross platform embedding is really difficult as the OSs have a very different concept of application embedding and lifecycle.
You can embed a native widget into Codename One "easily" but that's probably not enough.
Since in Android everything is an activity you might be able to hack something by packaging two apps into one APK and moving back and forth with the Codename One app. I wouldn't recommend it since we make a lot of assumptions and this might not work. You won't be able to do the same on other platforms either.
One strategy some developers took is to have two distinct apps that communicate between them via the cloud or via app URI calls (or both). This is a workable cross platform approach but it's also a bit painful and it isn't seamless to the user.
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/
I am currently building a mobile app using react native. This is a parent app where parents can view marks, homework, fee details etc. We work with multiple schools and each school will need an app of their own. Only changes between these apps as of now is the splash screen and the app icon.
What can I do to keep my codebase more organized and less redundant between every app so that it will be easy to maintain, and also for new releases?
I have done a similar task before. I ported 4 different apps with unique styles from a single react native code base. You can read some related bits here.
Basically you just need to rename your app before building for ios and android.
If you need to apply different styles it is a much harder task just to explain here. However to give a hint, you need to make your app styles reusable like a theme. In my case I was using nativebase themeing. And before renaming the project I was changing the theme folder to be used for each app with a bash script. This gist might give you an idea.
For those looking for an answer,
The right way to build different apps out of the same codebase is to use android variants https://developer.android.com/studio/build/build-variants. This will allow you to sign your app with different keys for each variant. Each of these variants needs to have an appropriate folder inside the android directory, which is the place you configure splash screen, assets etc.
If you are using expo, this is not possible as you are not supposed to mess with native code. expo only supports release channels (dev, staging, prod) versions of your app.
Note: I didn't have to work with ios, so can't provide any useful links myself. But I am sure there will be something similar.
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 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.