I am considering building my react app with the intent of having both web and mobile built . I came across Next js and is thinking of using it. However, what bothers me is that considering server side rendering is rendered in the server, would that be suitable for mobile apps ? I mean what happens to my mobile app when offline ? Is server side rendering applicable in mobile apps? Am i confusing how the server rendering works ? Pls a better explanation is highly appreciated.
Server side rendering javascript apps gives the same result as any other server-side language.
An example could be a static site made only by html files. What would happen when offline? Nothing.
This behavior is due to impossibility to connect to host.
To handle offline for mobile apps you could have static file handled in app, or you could use a more modern approach without developing the mobile app: PWA.
A Progressive Web App allows to integrate with some native functions of mobile devices and to handle offline status.
Related
I am working on an application that has a desktop view and a mobile view for the front end to my Spring Boot application. The desktop view is a react app and the mobile version is a react native app.
I embedded the desktop app into Thymeleaf to load the application. I understand how that works. I'm now having issues on how that relates to the React Native application. So the plan is to load the application onto some select Android devices. I am not familiar with how this would work.
My question is, when the React Native app is loaded on the phones, do they need to be connected to the server or does it just make calls to the Spring Boot app. If it's the former, would I have to embed it similarly to the React desktop view in my Spring Boot application. If it's the latter does it just get loaded to the phone, and when each button is hit or when it's loaded initially does it just make it's normal calls to my APIs in the server?
Any help or links to helpful information would be greatly appreciated. Let me know if you need anymore information.
Well, about your question, react and react native are client applications, both work on the navigator or cellphone and can work without any internet connection, it depends on the implementation that the web or mobile application have.
Server call is needed in the case of React first time, after that the resources are cached in the navigator and will be used by the navigator to render the web page.
You only need calls to the Rest API about your business logic.
Read more about this:
https://reactjs.org/tutorial/tutorial.html
https://facebook.github.io/react-native/docs/tutorial
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 got an old app I wrote in Node, Mongo, Express and Handlebars. It seems to be a bit outdated in the sense that it was more static and all data was called locally off the same domain and rendered with Handlebars on the server side, which I thought was always necessary for SEO and it wasn't built with the idea of later building and connecting the data to a mobile version.
I've been using React a lot lately as well as looking into building mobile apps and with the tutorials out there, it seems like most apps these days are designed in a way that the backend is mostly a remote api with cross site origin requests enabled and a frontend that just gets the data from it and parses it on the frontend whether it's a desktop client or a mobile client.
What would be the best way to modernize my old app that'd keep it rendering on the server side using react instead of handlebars for SEO, while also having an api service for if I were to develop a mobile version that could get and parse the data?
There's a lot of server side rending react tutorials out there, but I'm not sure what the best approach is.
To turn your current app into a SSR (server side rendered) react application would be a big ask.
You would have more luck ripping out the html / handle bars response and just returning JSON instead, effectively turning it into an API.
In terms of adding a SSR react layer, the easiest option would be to use something like Next.JS. This does the heavy lifting for you to create server side rendering. There are plenty of other options out there but Next is one of the best and probably the easiest to get going with.
You would then make API calls from your SSR Next / React app to the Node API.
You can reuse the same API for a mobile application if you chose to go down that path at a later stage.
You would then make API calls from your SSR Next / React app to the Node API.
You can reuse the same API for a mobile application if you chose to go down that path at a later stage.
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!
I work on a team that supports a mobile web site. It's a typical web app in that it's pages of forms that submit and retrieve data from a server. Back end currently JSF.
It's working fine but there's a strong want to start leveraging more of the native device's components and features (namely messaging/alerts and UI widgets). Given the number of platforms we're trying to support (iOS, Android, BlackBerry, Symbian [yuck] and potentially Windows 7) PhoneGap seems to be the first thing I should spend some time looking at.
I think I have a good grasp on how it works (broadly speaking) in that it allows you to use HTML CSS and JS then builds a native app that 'wraps' around your code and offers up a JS API into the device's native widgets and features as needed.
What I'm not so clear on is how one would use it in a client/server type of interaction. Could we use PhoneGap to create a front end UI that would still talk live to our servers? If so, could we leverage standard AJAX/JSON/XML type technologies to send and receive the data or are there hidden hurdles I'm not aware of in doing that with a solution like PhoneGap? In otherwords, does the webview within the PhoneGap app work just as WebKit would in that we can make an AJAX call, get some data, and update the DOM?
Or is there a different type of framework I should be looking at?
A example summary explanation of what we're looking for would be: We'd like our current web application to be able to launch a native date picker on the device and receive alerts but still interact with our servers as our current mobile web site does.
As user731077 says, yes, PhoneGap can do all of that. There's a number of potential methods you could use to do so in the Javascript code of your PhoneGap app. Here's a few to check out.
XMLHttpRequest object, but I'd suggest one of the below choices that handles cross browser inconsistencies
jQuery ajax()
xui.js xhr() (my choice)
zepto.js ajax()
xui.js and zepto.js are my suggestions as they are basically stripped down versions of jQuery optimized for mobile web development. I'm partial to xui.js because its the framework commonly used by the PhoneGap guys themselves.
your every question has a YES answer :)