When to use react with electron - javascript

I plan on making a desktop only app. I don't have any intent to deploy it to a web server. Think something like VS code.
Im used to just "throwing" react at any problem that has the term "web application" in it. It streamlines so much its almost impossible to write really great apps without it in my opinion.
However, electron is a different beast entirely. Should I use react still, or is there more benefit to just sticking with raw electron in my case? I'm fairly new to development in electron, so I would like to do it right.

Electron is actually Chromium browser on the front end and nodejs on the backend. Building an electron app is technically building a webpage which ships its back end along with it.
If you have a dynamic application that needs to rerender frequently, ReactJS’s virtual DOM will be super effective
So, if you're used to 'throwing' react at any problem that has the term 'web application' in it, i would suggest you go with reactjs.

Related

Do I need to know JavaScript to fully utilise Electron or Nativefier for a web app to desktop app conversion?

I used Nativefier to convert a web app into a desktop application and was wondering through nativefier if I can add my own features provided I know JavaScript.
I've never learnt JavaScript before, so would I need to get an introduction to the language before I go further and add my features? Through main.js?
Having said that, I plan on distributing the application and aware that electron stores your source code as asar's. Instead I plan on using nw.js. Can I do the same thing as I did on electron/nativefier with nw.js?

NextJS as a backend JS

I got confuse while searching top JS backend framework then I found NextJS is one of the top list, I thought nextjs is just a simplify of CRA and still need like nodejs as the backend. Back to my confusion, so when we normally create a full JS app we will need frontend and backend tech like (nodejs + reactjs) so with this nextjs we can make a app just with nextjs ? **sorry for my bad English
Simply said, NextJS is basically React on wheels and has NodeJS built-in. It has lots of other features built-in so you need almost zero-configuration to build a full-stack app.
If you have 10 minutes to spare, take a look at this video
Essentially NextJS is a full-stack framework. Which means that developers can write both front-end and back-end code in a single environment. It can provide multiple benefits among various use cases. Which can be things like seo optimization, image optimization or quickly switching between different rendering methods (SSR, CSR, ISR or SSG).
As for your question "Can we make an app just with nextjs ?", you certainly can but it depends heavily on what type your app is.

React with Server Side Rendering Stack

In the last few years, I’ve been working with an old fashioned stack, but pretty effective for my use case. The stack was Node + Express.js + Angular.js 1.x.
Basically, the backend made the rendering of the view (via dot.js or Handlebars, any template engine) and then, in the Frontend side, the Angular app was mounted.
The use case needed to be SEO friendly, so the content must be generated at the backend and served directly. Also, the UI has its functionality, forms, etc. It’s not just dummy text.
Currently for a new project with the same use case, I want to update my stack (using SSR aka server side rendering) where the app does not need to be a SPA (single web app). The base stack is still the same (Node + Express.js) and the only thing I want to update is the frontend library / framework.
I am looking for a framework / library with a big community and an easy way to share component and codebase across project. That’s why my first thought was React.
The first thing I found was Next.js and while I was reading and investigating, it goes beyond what I need. It is a quite big framework that has too much stuff I don’t need and I do not want to add overhead to my application and I cannot customize it as I desire.
I continue researching and I found an express package called "express-react-views" that is a template engine for express but it does not allow to mount the React application at the client side.
Browsing through the Github issues of the package, I found many people asking for these and they all end up being answered that Next.js was the way to go.
My doubts / concerns are the following:
Is React the right tool / library for this use case?
In case of not being, what do you recommend?
Being the right one, is there any package / tool on top of React and Express that helps me out with SSR that allows me the customization I need?
I don’t want to rely again in old or antique tools like jQuery or Angular.js 1.x because the maintenance and code sharing across projects is complex and annoying.
The easiest solution, without going deeply into Next.js, is using the native React feature ReactDOMServer:
https://reactjs.org/docs/react-dom-server.html#reference
It's actually pretty easy to use, you just serve the HTML as a string and mount your React App Client Side if you want then to handle requests with React Router.

Use React Native components in a Meteor React web application

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.

Web scraping in react-native ios?

I am building an iOS app with react-native and looking to do some web scraping. From my understanding traditional npm packages don't work because they rely on Node.js. I know there are Objective-C/Swift libraries for web scraping but I don't understand how I would integrate those into a react-native component.
Anyone have any ideas on how to get information from a website (web scraping) in react-native?
Interesting question. Architecturally, it might be a good idea to consider building a service which can provide the scraped data via an API. The more processing power the client requires (the heavier the client-side code), the more likely you are to run into lagging / stuttering issues in the app. Phones have come a long way, but still can't match a server's power.
If you want to press ahead, I would advise using the browserified version of Cheerio.js. Basically, browserify lets you take code written for node, and use it in a browser environment. You would need to test it in JS Core on IOS, but there's a good chance everything will work.
One other option is using jQuery's load function or the fetch api included in React Native to make the call to the site (you don't have to worry about CORS), and parse the result manually.

Categories

Resources