I have an admittedly weird question to ask. We are in the process of migrating an existing application over to react. Due to some limitations of the legacy code we are dealing with, the majority of our users are on IE11 in IE10 compatibility mode. We are running into an issue with fairly large doms where the rest of the non react application has experienced maybe a 20% rendering time increase with react not actually rendering anything on the page (though it is still loaded in memory). This doesn't quite make sense to me since i thought that react only keeps track of its own trees. Is there anything else that react might be doing globally that might cause these types of performance problems? I've dug through performance session traces in IE and nothing really jumps out at me as being executed on the react side. Ideally we'd have smaller doms I realize, but we're dealing with some legacy code and that's not an immediate option.
Related
tldr: I work on a large React app that needs to be improved in 3 areas: component sizes and not adhering to the Single Responsibility principle (SRP), lack of a form library, lack of any real state management. Are there any best practices/resources that can guide me in developing a plan to refactor this app over time?
Some background: I've been a dev working primarily in React for about 2 and a half years now and on my current team it's myself and 2 senior devs. They are both great but mostly come from a C# background and learned React while they were building our current project so there are a lot of areas that need to be cleaned up. I would like to try and make some improvements in three key areas:
Splitting up some of the components into smaller ones that adhere to the SRP. We have some components that are close to 1000 lines long and do a ton of different things.
Implementing a dedicated form library like Formik or React Hooks Form. We have some pretty complex forms with lots of fields (some that depend on others, some optional, etc.)
Potentially implementing better state management like the Context api or Redux.
My question is: Are there any resources I can use to help me plan these efforts out in stages? I think my biggest concern is getting our state into a better... state but I've never refactored such a large app before. I know this is slightly subjective and I'm not looking for an objectively true in all scenarios answer. Just a nudge in the right direction for how I can start thinking about planning this out.
Good day! I have a question. It is planned to develop a large web project, which will be scaled in the future. I would like to know what is better to choose EmberJS or React? There is experience with EmberJs, but I would like to hear the opinion of experts who have experience with both frameworks. I've heard that react is lighter, but at the same time, you need to include a lot of libraries to add functionality like ember js. Tell me, please. It would be great to see some benchmarks in various conditions. Thanks guys!
I started with React and later moved to Ember. The truth of the matter is that the core problems teams face when developing frontend / single-page-apps are about the same regardless of what tool you're using. Those problems are going to include learning the business, learning the history, struggling with how to not over-use the framework, and instead using "the platform" (using MDN more than framework docs, etc). Generally, it takes way more time to learn a business / existing product than it does to learn a framework.
For some benefits of ember's whole ecosystem, which React does not have:
Ember has a more cohesive ecosystem which makes upgrades much more straight forward.
Ember's goal in frontend is to reduce the meanial differences between apps so that you can focus on features. This includes stuff like state management, routing, etc. For comparison, there are features in Next.JS that landed in the last month or so that Ember has had since the beginning.
Ember's discord is an invaluable tool of helpful people. A bit US-work-week centric at times, but it is the go-to place to get more synchronous help outside of your own team. Link here: https://discord.gg/emberjs (which is found on the community page: https://emberjs.com/community/) -- React also has a discord, but I found it way less welcoming due to the sheer volume of people moving through there.
Conventions is key to any framework in the single-page-app approaching SDK space. Conventions are optional guidance that are happy-path defaults that, once memorized, bring productivity ahead of where it would be without the conventions
Ember is mostly "Just JS". React has this same claim, and maybe that was true back when they were using classes for things, but with everything needing hooks now, and the over-use of useEffect, Folks end up writing more React than they write JS. With Ember, you still write more JS than the framework. Ember has tried very hard to allow you to stick to MDN for for anything but reactivity and routing. State management is even allow "normal JS" (with some conventions due to limitations of JS, itself)
I've heard that react is lighter, but at the same time, you need to include a lot of libraries to add functionality like ember js.
This is true, however, It stops mattering very quickly. Ember is only 100KB (min+gzip) -- React (at a minimum, I think is ~40kb (min+gzip), with no libraries (react + react-dom)), and the size of your underlying framework begins to not matter in comparison to the rest of your app's code very quickly.
Unless you're targeting low-connectivity areas and trying to also get your site to load in < 0.1s, the framework choice w/r/t size also doesn't matter. (I'd say this of Angular, too!).
Fwiw, and maybe this is a bit of a disclaimer, I feel like React is a modern day jQuery (usage in the vernacular is nearly the same as jQuery). Nearly everyone is using it because nearly everyone knows it. It doesn't matter if the tool is good or not, it's everywhere, yet holds no opinions about anything and relies on the broader community tot learn how to use it. You can't build products out of just React.
And kind of more cynical, React is an avenue to very cheap labor for employers to hire straight out of bootcamps.
As an aside, one thing I've noticed about frameworks, is that most of the "cool stuff" (that you'd want to use day to day) isn't documented in the framework docs. It's knowledge derived from knowledge of both the framework, and what the web can do on its own.
For example:
handling form submissions without a ton of wireup: https://twitter.com/nullvoxpopuli/status/1502682732178124805
dynamic imports / await importing a component: https://twitter.com/nullvoxpopuli/status/1507715367581462531
testing with MSW:
https://twitter.com/nullvoxpopuli/status/1525509103317041152
https://twitter.com/nullvoxpopuli/status/1525508184353406978
Filtering local data: https://twitter.com/nullvoxpopuli/status/1496512125237440515
Integrating Tailwind: https://twitter.com/nullvoxpopuli/status/1481993894430658568 (the lazy way)
Thinking about template syntax: https://twitter.com/nullvoxpopuli/status/1474037335583080449
I'm trying to improve the page speed (and SEO) performance of my React app at https://bravos.co. You can see the results of the page speed test here: https://developers.google.com/speed/pagespeed/insights/?url=bravos.co
I'm stuck at 64/100 on mobile and 46/100 on desktop.
I've improved a number of things, but there's a lot that I'm just stuck on, and seems to be difficult to improve give it is a React app:
Eliminate render-blocking JavaScript and CSS in above-the-fold
content (this is mainly the bundle.js, which I can't eliminate given that it's the whole app)
Optimize CSS Delivery (This is relatively minor, but I'm still not sure how to do it in React)
Enable compression (I can gzip some things here, still looking for an easy way to gzip and deploy a random javascript file)
Leverage browser caching (this I can't figure out how to do in React, particularly since .htaccess doesn't seem to be used)
Any advice or thoughts here would be massively appreciated.
All:
I am thinking of starting React Native, one reason is many people talk its performance is better than other Hybrid Framework, but I am wondering how React Native make it faster in Mobile, I thought all hybrid app is like a web app run in a webview, is the way React Native uses different from Cordova? Could anyone talk about the procedure how React Native is turned into a mobile app?
Thanks
I agree with the other comments. Your question is a bit broad, but the short of it I think is that hybrid apps rely on the WebView, so they're performance is limited by the browser's performance, which is of course single threaded. Getting 60fps animations is a constant struggle for Hybrid apps, though they're getting better all the time both in terms of the browser's capabilities and technique.
React Native bridges to native components, so you get native performance characteristics. Things like calculating the view are offloaded acync to separate threads, so the user's experience is never blocked.
Here's a useful list of other benefits...
WHY REACT NATIVE IS THE BEST SOLUTION WE HAVE SO FAR FOR NATIVE MOBILE DEVELOPMENT
sorry for the all caps... that's the actual title of the list :/
What jinja2 can achieve, the same can be achieved with Angular.js. My question is- are there any advantages of replacing jinja2 with angular.js completely ?
I think most problems came from the same obvious difference: Jinja2 is server-side, Angular is client-side, this makes they really different.
SEO. Google don't understand Angular magics. It is just a heavy Javascript code and Google can't understand it fine. Sure, you have some workarounds to show your important text to Google, but to solve it you'll have to render some things server-side, going back to Jinja2 or some hack to render things to improve your SEO. (it is not important if you don't care about Google searches)
Performance Server-side rendering is way faster than Javascript rendering. I'm talking about your average user, maybe with an outdated Internet Explorer and a crappy internet connection. With Angular, you have to wait at least some Javascript assets to be loaded before the page is usable. Users notice this and we know a slow site will hit your conversions. Check this Twitter article about "time for first tweet": https://blog.twitter.com/2012/improving-performance-on-twittercom
Compatibility. Yes, they claim the framework supports all common browsers, but have full documentation about hacks to make it work for IE7. Depends of your audience.
Maturity. Jinja2 is really stable, has a pretty API and is deployed with almost all Flask websites. Angular is still evolving and sometimes things just change a lot.
Inexperience. You can't just replace Angular with Jinja2. When you try it, you will understand they are different and you must not work the same way with both. You will make a lot of mistakes before you make things right, just like with any new awesome tool you use.
Of course you can claim against all my arguments based on your specific needs, this is just some things you must understand before you go to Angular.
That said, I'm using Angular in several projects, mostly for single page apps. This is an awesome use case for Angular. In all these projects, I still use Jinja2 to some rendering, so this is not a complete replacement.
UPDATE:
Some updates almost two years after my initial response.
Google is better understanding dynamic rendering, but I still don't trust it.
I don't think the client-side rendering is a thing. Only realtime data is rendered client side, but the base HTML is generated server side.
Angular dropped IE7/IE8 support. It is definitelly a good thing for the web, but unfortunately I still must support these browsers in some cases.
Angular 2 is on the way, changing everything you know about current versions. I don't remember any major Jinja2 change.
Why is replacement your objective? Use the power of both Jinja and other server side frameworks together with the power of client side frameworks.
The benefits of using both:
less and easy code
better performance
more easy to maintain
and much more. You have a choice.
Choosing for one or the other will make your work frustrating and complex.