I ran into http://maker.github.com/ratchet
As I see this is for prototyping and not actual production frontend for mobile.
Sorry for the stupid question, but is ratchet for a production website or just for pretending to have a mobile app?
Why would it be only for prototyping? There are lots of scenarios where you would want a web app that mimicks a native one in production, without ever planning to build a native version.
For starters, production time is much lower when you can use html/javascript instead of Objective C, you can develop on any platform, skip the hassle of App Store approval and most functionality for non-timecritical apps is available as a web app. If you decide on going "real app" later you can wrap your web app in Phonegap and release it through the app store.
Related
I have this project where I have to code a website and ios and android apps.
I have to do this with a very limited team (basically myself). So I want to share as much code between those platforms, to avoid maintaining different codebases as much as possible.
I have come to consider flutter : the logic (and interaction with the backend) in dart can be compiled to both ios and android, and to javascript for the web site to call. I also like how the UI is built using flutter.
For the web site, I know there is flutter web that can be used to do a web app, but I want my website to feel like a web site more than a single page app. I have thought about using React+Gatsby to do the website's ui, while calling the dart compiled js for the logic. That would enable high page loading speed, good seo, while keeping the interactivity of a react app and the single codebase logic through dart to js compilation.
I am wondering if this seems like a good approach to you, and if not, how you would do it.
In this approach, I am wondering if it would be possible to embedded flutter web widgets inside of react js components, always in a concern of maintaining as low platform specific code as possible. I have not found any other way of doing this than embedding them into iframes, which does not seem like a good idea, or does it ?
Update
Flutter Web is now available in a stable version for production.
Below answer is relevant back to the time when question was asked.
Flutter Web not recommended
At the current date, I would recommend not to use Flutter Web for production as it's in Beta. The Flutter Team is still working on improving quality, performance and browser compatibility. You must be cautious about using it as you may run into bugs and some other complications.
Also, I believe that the community support for Flutter Web might be on a lower side as it's pretty new.
Limited browser support
Another factor which bugs me is that the Flutter web apps can run on limited browsers as of now which would affect the reach to your user base:
Chrome (mobile & desktop)
Safari (mobile & desktop)
Edge (mobile & desktop)
Firefox (desktop)
What would I prefer?
Well, although it might be a hassle to handle different codebases for mobile and web platforms, I would still prefer to stick with React JS as it's much stable with better browser & community support as opposed to Flutter Web.
Good luck with your app! :)
I am unaware of how to use Flutter widgets inside a React app. But to address your other concerns,
So I want to share as much code between those platforms, to avoid maintaining different codebases as much as possible.
Given no other restrictions, this leads to a single Flutter app for both web and native. For a team as small as three we still found it easier than having multiple projects.
The key factor in merging our initial projects to one was the notion of mobile browsers. In a mobile browser you website should reduce itself to the look of your mobile app, unless they have different purposes. And this automatically happens with Flutter projects if you derive your layout breakpoints from screen size. Otherwise you would code your same narrow design twice: in Flutter for native apps and in React for web.
Same goes for native apps for tablets in landscape mode. They call for a layout that resembles your desktop browser version, and you automatically get it with Flutter.
Also in web version you may have more tools than in a native app, just because your screen allows it. Naturally, you would code this logic in JS. But then you get an order to migrate this to native apps. Would you then replace your JS logic with Dart logic compiled to JS and embedded into frames? This is a messy road.
Lastly, think of Mac, Linux and Windows platforms that will come to Flutter soon. Should you ever need a desktop native app, you would want the same layout as with web.
I want my website to feel like a web site more than a single page app.
The difference in feeling between a website and a single page app lies mostly in state management and URL handling. You may do the following to reduce it:
Introduce URLs for your pages. By default, in Flutter every piece of action can happen under a single URL of example.com/#/. The window then feels fragile as there is no URL to copy and get back to. Flutter's Router API, released in Oct 2020, allows you to generate URLs on any change in your app's state and parse the state back from URL. If you do it right, then everything on your screen becomes a function of the URL, just like in traditional websites.
Use url_stragegy package for your URLs to be example.com/path rather than example.com/#/path which immediately feels fake.
I have not found any other way of doing this than embedding them into iframes, which does not seem like a good idea, or does it ?
No, it does not. Mostly because you get too narrow a channel of communication of messages between JS windows. How would you listen to Flutter's BLoC's stream in another frame? It would take too much boilerplate code. Also I cannot think of easy debugging process.
To me, Flutter Web still has drawbacks:
It takes awhile to load.
Many specific JS APIs are not implemented yet.
Many services you integrate with may not have Dart SDK, while having JS SDK. For instance, I struggled to get Ably working.
No search engine optimization.
You cannot use em as a screen unit, so scaling elements may get tricky.
Still with limited resources a single codebase outweights everything else.
To be clear, my team has been working on a web+native project the whole 2021. It now has passed most of the testing, but not yet released. For a sense of scale, it is a marketplace of 40+ screens.
I'm just learning development and recently, I finished a MERN stack course.
Now I'm wanting to build my second Commercial App for the company where I am working.
At first, I was only considering responsive web platform but now, I can't deny the necessity of functionality on ios and Android.
Thus, I did my own research on which framework or method I will have to use to minimize my production time rather than using react web and react native separately.
It seems like Expo Web and React Native Web will be the closest solution I can think of.
I'm not sure if I'm trying to take things too easy, but if someone can enlighten me with suggestions on how to approach this dillema, that will be greatly appreciated.
In Short.
What is better? Expo Web or Native Web and best way to learn..
When using Expo, you're building the same app for iOS, Android, and Web at the same time.
Building an app with Expo CLI will provide a 100% code base across the 3 platforms. Because the Expo SDK covers most, if not, all the tools you need to build a simple application without touching native code.
Expo also offers you the possibility to eject from it, if by any chance you need to change native code.
I would suggest that you start with Expo CLI, because of how rich its SDK is and how easy it is to get started with it. And if later in time you wanna modify native code, you can eject from it.
I dived into this new subject Electron few months back. I'm a PHP developer, but after going through many articles on web I'm learning nodejs, express through online resources.
Could anyone here suggest me, what exactly I need to focus on. I'm really interested in making a Electron app with routing, CRUD, sessions etc.
Please suggest, your help will save me a lot of time
Electron itself uses HTML, CSS, and JavaScript for the interface, with Node.JS for powering the background app stuff like opening windows, and keeping the app alive. For online interactivity, it can use any proper web server you want, be it PHP powered, an NGINX static site, or Express as you mentioned, or even use none at all - being a purely offline app.
We are considering development of a web app using ReactJS (probably, we will use npm's create-react-app feature). Also, we are thinking if it will be possible in future to easily transform the web app to a desktop application using Electron. Since we have no experience with both technologies, we like to ask about this combination, whether it is a good option, and if it is possible to turn a React web app into a desktop Electron-powered app.
I was googling any working tutorial how to build an app using both technologies but no one worked for me.
So, to sum up, is it good choice to start developing a web app with React when we would like to have the opportunity to transform it into a desktop application built with Electron? If not, are there any better technologies?
You should look into how exactly your solutions are built, instead of focusing on the technology itself. If your team builds your backend with this in mind, you can create APIs that your clients(React Web App, Electron Desktop App) can connect to.
To answer the question: No, it is not a good choice to begin development of your web app project without considering future implications of your design. Focus your time on how your backend talks to your front end.
Moreover, ReactJS is only a front end library, you can use it with Electron, Check out some GitHub Hug Repos like: Re-Electron , React-Electron-Starter, Electron-React
I've been thinking of creating an hybrid app. I worked with ionic before, but i don't have any clue about react.
What i exactly needed is 'code once run anywhere' approach. The angular 2 is doing great in that i can write code for web app, android , apple devices and even windows.
I want to know whether i can do this in React. Can I create an app with react which runs on both web and mobile app as platform independent.
Thanks in advance!
Angular 2 and React are great frameworks/library(for react) which can run almost anywhere. In fact lets first determine what we mean with anywhere.
Angular 2 can server that app on web and if you are using a responsive format can serve mobile devices as well really fast. On devices you can serve it with ionic but the catch here is that this will be served with webviews which is actually a small placement inside the app to show html content. This rendering is rubbish if you want to serve native experience to the user. If not, then great ! Also you can have windows phones as well.
React on the other hand is easy to go in to code fast. I recommend using redux (which might take a while to get used to). Also with responsive design can serve many web devices really fast. Now on the smartphones the experience is native. Yes exactly native ! So if you plan the application correctly and split the logic right you can serve from the same app both application web + mobile. For windows phones now there is a limitation.
For desktops you can use electron as well and have it all!
I guess for me you must consider what your target is (time, devices, experience) and then decide.
Have fun!