But first - two important pieces of advice.
In the beginning… learn the basics by heart!
A good practice that I often introduce to my learning process is to try to explain just learned concepts to a friend or relative who doesn’t know how to program at all in five minutes.
Just make sure - to switch the audience from time to time. For some reason, people tend to get annoyed pretty quickly when they are forced to listen about new JS libraries too much. So weird, I know!
If you can't explain it simply, you don't understand it well enough.
Don’t waste too much time on learning if you are not going to use it
This one is extremely important - be selective. Of course, there will come a feeling that you are missing something, but the truth is that in most cases you probably will forget it quicker and will waste your precious time learning another “amazing” library hoping it will solve all problems. But it won’t.
So, try to estimate and structure your learning path before you start. It will save you plenty of your most precious resource – time 🙂
Which JS frameworks are ACTUALLY worth your time? Here is my selection!
Svelte is a component framework, but with one major difference. Instead of forcing the browser to do some extra work with DOM manipulations, reconciliation, etc, Svelte runs at the pre-build time converting components into performative imperative code that precisely updates the DOM.
I strongly recommend learning this particular framework. Here are some main reasons why:
- Has a powerful system of reactivity
- Provides great developer experience
- It’s fast (even without Virtual DOM, read about it)
- It has a relatively short syntax (less boilerplate code).
This framework is on the hype now, so better hurry up and jump on the bandwagon!
This one is a must. Make sure that you are familiar with TypeScript, because it already has a big piece of cake on the market.
Typing is the most explanatory documentation for your code, it increases its readability and quality, it prevents you from unexpected situations during writing and compiling code, instead of its execution.
GraphQL – it’s modern vision of how you can get data with API calls. You can ask exactly what You want with GraphQL query. It’s easy to integrate with different platforms:
- Native mobile
- Native iOS with Swift
- Native Android with Java
Some projects replace state management with GraphQL. Consider this tech in any way.
Nest JS is a framework that allows us to build efficient and scalable server-side applications in Node.js and allows us to use proper architectural approaches. It supports the latest TypeScript, GraphQL and Angular like syntax, high customization and third-party libraries support. All these features make NestJS very developer-friendly and flexible for creating complex applications.
Gatsby is a static site generator that uses React as UI library, CSS for styling, GraphQL for data fetching. It combines all of the above and generates and delivers fast and secure static HTML pages. Gatsby also has a wide plugin library, developer-friendly structure and a growing community of supporters and users.
Next.js is another static site generator. It is a lightweight framework for static and server-processed React applications, such as (Netflix, HULU, Twitch). It has a lot in common with Gatsby, but comes with one main difference: NextJS generates pages in run time with each request on the server, while Gatsby generates an HTML page with JS and CSS in a built time and doesn’t need a server at all.
Bonus: React and advanced state management concepts
The hype topic for 2019 and must-have for 2020 is React Hooks, so if you still haven't explored it in detail, just at least be aware of the basics.
Long story short? This is a more performant and flexible version of lifecycle methods for functional components. After you master the basics and are ready to get some experience with more advanced topics, I recommend this amazing article by Reed Barger (@codeartistryio) about React Hooks.
React concurrent mode (still experimental) and suspense data fetching features allows non-blocking but interruptible rendering, which makes it possible for React to work on separate updates of component in parallel.
And if you want to improve your knowledge in app state management even more, I recommend to start experimenting with Redux (link) and MobX (link) libraries if there is a need for advanced concepts to be implemented as well as to be aware about React Context API.
Side note: forms
In case you are a creature of habit only use Redux-form, consider some most popular alternatives, like React Hook Form or Formik.
I hope you enjoyed my take on JS frameworks and that you found something interesting for future consideration. If you feel like the list is incomplete and there is an amazing JS technology out there that should be mentioned here, reach out and let me know 🙂
And remember: never stop learning!