JavaScript Frameworks — Know it’s Lifecycles Hooks
I started my Web development journey a little over five years ago. My first JavaScript framework was BackboneJs, and I am so glad it happened that way. The reason is that although BackboneJs is a framework it didn’t feel like it. I feel it was close enough to plain old JavaScript that I still learned how to apply design patterns in JavaScript and the lifecycles were just on views.
So, lets get to it — JavaScript framework Lifecycles!
The one thing that keeps saving my butt, is understanding their lifecycle!
I have developed heavily with several JavaScript frameworks and played around with a few others. The one thing that keeps saving my butt, is understanding their lifecycle. This is very important, because it gives you a sneak peak into how the framework was designed.
I have seen several developers jump into a new JavaScript framework, and only do the ‘getting started’ guide. From their they move onto to learn the specific things they need in order to proceed with their task, and maybe a day later or when things don’t work they dig into the lifecycle. Even then it’s just a peak. Don’t get me wrong I have done this as well, specially when there is a deadline. But I always take the time to come back to understand its’ lifecycle.
…spend time on learning the basics along with its lifecyles, it will save you time in the long run!
All this back and forward between implementing and learning a specific subject about the framework like how to create components, directives or routing can seem like a time saver. But it’s really not, spend time on learning the basics along with its lifecyles, it will save you time in the long run!
What’s so important about a JavaScript framework lifecycle?
When learning a new framework, it’s best to quickly build a mental model. This doesn’t mean you have to learn everything, but by understanding it’s lifecycles you are on your way and on the right path. As you progress on building your application you will start thinking like angular, react or vue (or which ever framework is hot right now), and this is a big time saver as it will help you design, build and debug you application better.
There are three major points to understand, when reviewing lifecyles:
- Lifecycle Management
- Data-binding
- Sequence
Lifecycle Management
Lifecycle management is obviously done by the framework. The importance of this is that it tells you when certain key events happen like initialization, data-binding (component to DOM binding, more later), destruction of components and interaction with child components. These are just some of the key events, but depending on the framework there might be more. Understanding how to best hook into them can be the difference.
Data-binding
Depending on the framework, data-binding can be achieved differently. Some use component properties or element attributes to control data flow along with events, while others use state management. The bottom line is that you have some component properties that should link up with a DOM element and your data should get updated either by an internal process or by a DOM event (i.e mouse click, or text input) triggered by the user.
How this happens is very important to understand from the framework, and each framework does it differently. Fore example, angular supports both one-way and two-way data-binding with slightly different syntax. One-way data-binding is done via property binding ( [prop] ) while two-way is done in combination with property and event binding ( [(target)] ). To better understand angulars’ lifecycle hooks, take a look at this post by alligator.io (and check out there other great content).
Sequence
Another obvious yet crucial point to understand is that all hooks in the lifecycle are executed in a specific sequence. Understanding this sequence will let you know where to put your logic or where to begin debugging your issue. For example you wouldn’t initialize your data under vue’s ‘updated’ hook, but instead on ‘created’.
Things to watch out for …
Each JavaScript framework has caveats when it comes hooking into their lifecycles. I will show you a few examples to stress the importance of knowing these, which again can save you a lot time (I know I sound like a broken record by now!).
In vue, you write a function to hook into a lifecycle. You can either use a direct function definition or an arrow function — but this is where you have to watch out. If you intend to use ‘this’ within the function and you wrote it as an arrow function you will be shocked to see that it is not taking the ‘this’ as reference to your vue instance but instead it looks up the lexical scope. Which will cause an error of either property not found or the property is not a function. So you should use a direct function definition instead.
Here is a snippet from vue’s documentation. This will work because it uses a direct function definition. To learn more see vue’s documentation here, along with their great lifecycle diagram.
Next up, React! React handles data-binding and data-flow differently, it relies on the state object which is managed by the framework.
Many times while updating a value (take a counter for example) you would take the existing value and add the new one, but this would not work with react when using the state object. Example (from react documentation):
This looks sensible, like it should work and common mistake within React. But the correct way to do it is to write a function that accepts the current state as the first argument, and use that to form your calculation.
Unlike vue this will work either as a direct function or an arrow function, because you are not making use of this. Instead the state is being passed in as an argument.
Now, angular. One thing that I have learned from angular, is that it can be intimidating since there are so many things to consider and learn. The one thing anyone can get trapped on is on state management. At first you think, oh I wont have much state to manage from my client side code for now. Let me use properties to communicate between my components, then you realize RxJs would be better to manage my communication. As your application grows so does your web of observables. All I want to say is consider using a proper state manager like NgRx if you can catch it early enough in your development to make a change. It will save you lots of headaches.
Conclusion
I know it is tempting to skip over lifecycle hooks when first learning a new JavaScript framework, but come back to it! You’ll probably just need anywhere from 20 minutes to an hour to get started depending on the framework. It is well worth it, I hope I have convinced you with my points above. But if there is only one thing to take away, is that this will save you lots of time in the long run (just pushing it one more time…).
Hope this was helpful!
