If you are getting started in web development, it is tempting to learn the most used technologies early on. More and more junior developers are investing in React through self learning or coding bootcamps.
The problem?
While React is a great choice for building many types of applications, it is important to understand that there are alternatives. More crucially, React exists to solve a set of problems that developers face. Understand those problems first, and learn React next.
A little bit of history
People doing web development from the mid 90s till the mid 2000s experienced the dominance of Internet Explorer, incompatibilities between browser engines, slow advancements in the web and a lack of good practices to organise code.
Creating anything using JavaScript meant worrying about problems such as:
- Having the DOM reflect the application's state.
- Organising the code and splitting it into different files.
- Adding and removing event listener.
Several solutions to these problems were introduced. jQuery made it easier to manipulate the DOM. RequireJs gave developers a way to break down applications into multiple files and load them in the browser. Tools such as Gulp, Grunt and later Webpack improved the build experience even further. Frameworks such as BackboneJs, Ember and later AngularJs offered a way to structure applications and organise the code.
Enter React
At first glance, React looks like a step backwards. React focuses on the View layer instead of embracing the full MVC architecture. Unlike its predecessors and some of its peers, React offers no out-of-the-box solutions for common needs such as routing, state management or styling. The distinction gives React the status of a library and not a framework.
So what problems is react solving?
Having the UI reflect the app state
React’s goal is eliminating manual manipulation of the DOM. Instead of querying a certain node to update its attributes or children, you would describe the end result you want and React will take care of the rest.
To achieve that, React dumps the common paradigm of separating HTML and JavaScript. Your JavaScript code is no longer there to manipulate the UI created by HTML. Your JavaScript IS THE UI. (React still permits direct DOM manipulation using refs)
DOM updates are expensive
React makes updates to the DOM less expensive by comparing what the browser is rendering with what your UI is describing. This should improve the user experience in the browser.
Event management is messy
React simplifies event management by adding a single event listener to the root of the document. This should reduce memory leaks introduced by complex event listeners in an application.
Code is unorganised
React offers a way to organise code by breaking it down into components. This encourages the application to be broken down into simple units respecting the single responsibility principle.
The best of both worlds
Understanding how the DOM works, its limitations and bottlenecks is an essential skill to create client-side web applications. Learning libraries and frameworks early on masks those complexities. It deprives you from understanding what is going on in the browser.
Those libraries and frameworks are just syntaxic sugar around what the browser can natively do. It all boils down to what the JavaScript engine is doing and how the DOM is updated. This knowledge is essential to catch bugs and avoid performance issues.
Learn how to create an application using nothing more than HTML, JavaScript and CSS. Feel the pain of managing state, events and DOM updates manually. Understand the common pitfalls, the performance bottlenecks and memory leaks. Transition to an MVC framework. Understand that your front-end code can be organised and architected. Pick an old framework and give it a test drive. Backbone.JS is a great introduction to application frameworks. Finally,
learn React.
Conclusion
Don’t limit yourself to a certain library or framework. Eventually, the next big thing will come and sweep them off. Focus instead on what changes slowly. React will disappear but the browser will not.
Top comments (25)
I’m feeling the message highlighted, it’s a good idea to learn the basics of how the browser works, but be careful because the stark reality is that it takes a lot of time and on the other end 98% of jobs on job boards require React/Vue/Angular, even the backend jobs, oh yeah and now Typescript, and you can guess that this pattern will continue, when you get there, there will be yet another set of minimum requirements - in a lot of cases your resume won’t even reach the employers inbox.
I wouldn’t be surprised if at some point all the frontend jobs start requiring express/koa/happy.
I couldn’t agree more. The reason for people to not look for alternative is because of the market. People tend to go with the market demand but forgot that the most basic thing to learn is the fundamental.
Well, if your goal is just to find a job and the market is screaming "React" then you might not care that much about alternatives, or about spending a lot of time to obtain a deep grasp of the fundamentals. We're not talking about academic purity but about the realities of the market ...
That's very true. And I'm blaming the market for that, not the junior developers who are going in this direction.
So do you think learning React without going through JavaScript is enough to get the job done? I'm curious. :)
It is enough to get the job done for sure, but it's a short-sighted decision for the long term. I believe it can hinder advancement moving forward.
I believe if you pursue React or any other framework on the web, you're more likely to expose yourself in JS and that's where you need to study that further for more improvement.
If you know the fundamental, everything is just actually another combination of those fundamentals.
At some point though it's no longer going to be feasible to learn the fundamentals properly, HTML/CSS/Javascript will become like assembly, you learn it briefly in some university course, but quickly move on to higher level frameworks. Not sure what happens to those of us who had to go through the pain of learning the fundamentals.
I totally agree. But I believe at some point, in the not very near future, the web could evolve and incorporate some concepts of the libraires/frameworks as open standards for the browsers to implement. I don't see why ,for example, browsers wouldn't have a native implementation of something resembling Virtual DOM to speed up DOM updates.
I see much like low level languages now a days. They are so popular back then because they made life of programmer much easier from their time but not today. I see your point :)
I understand your reasoning, on the other hand companies are screaming for React devs and might not care if you have a very profound knowledge of the DOM and other fundamentals. As long as you have a good grasp of ES6 and (of course) React, they might happily hire you.
Correct, but unfortunately the problems will start to appear down the road for people who have no grasp of the fundamentals.
Why not handle the problem when it comes then? For many people, starting is the biggest hurdle. Choosing the most used framework seems to be the easiest (and fastest) choice to overcome that hurdle.
It's normal for newcomers to have gaps in their knowledge. That in my opinion, is the difference between a junior and a more experienced developer.
I believe that investing time and effort in a library/framework early on will make it difficult to go in the opposite direction and grasp the fundamentals later on.
I think the discussion is more about how much of the fundamentals you should know. You should at least have an idea what the heck 'DOM' means ... and obviously a firm grasp of Javascript, and of programming fundamentals, for that matter. With all of us here having been in this industry for at least a couple of years (well that's what I guess) we probably forgot how much there is to learn before you can even remotely begin to call yourself a competent (junior) dev.
But, I see what you mean - there is absolutely a lot of value in learning how to develop a web site or web app using just HTML, CSS and Vanilla JS, because this gives you a much deeper appreciation of what React (and other frameworks) are doing.
I agree. The difficult part is about striking a balance.
I'm not suggesting people should understand the working of the V8 engine before starting with React, but a grasp of the DOM and its APIs is necessary.
I see what you mean, you should of course have some grasp of the fundamentals.
I think that's probably sound advice. Look at how many people for years couldn't build any sort of project without jQuery - we now have a situation where it's hardly ever necessary, but still widely used as a dependency or for basic DOM manipulation that could be done easily without it, and if you search for some functionality you'll have to wade through a sea of jQuery plugins to find a library-agnostic solution.
I agree, I started learning React too early while I was still struggling with some core JS concepts and it made me question both my React and JS skills and turned me off from learning React for some period of time. I think most front end juniors are alright with knowing just HTML, CSS and JS before starting to apply for jobs and as much as frameworks are useful and popular, we should really get comfortable with JavaScript before jumping in to learn the hot new framework. Good article!
Thank you for sharing your experience. I believe you summarise my point very accurately.
thanks for writing
Thank you for reading
Yes, interesting read and perspective!
Thank you.