Frameworks like Angular or UI libraries like React help you bring structure into your front end logic. They have helped me in the past with building browser-rich applications.
In particular I have been using react more lately. This is mainly because of its freedom to use wherever you want. You could have a project where you’re using jquery everywhere and just decide to use react in a single component. It doesn’t require you to build the app on top of the framework.
So why should you use something like react?
Because it forces you to think of your application as a set of components and sub-components. It forces structure on to you in a natural way. It also brings reusability to the table, components are easily reusable. Besides that big advantage, react can also optimize the speed of your app by making as little DOM changes as it has to, thanks to its concept of the virtual DOM.
When should you consider using them?
If your site is just a plain informational website that shows some dynamic texts here and there and doesn’t have much functionality requirements, then there’s really no need to use these types of frameworks.
Now I use babelify, which is sort of a plugin for browserify. You can read on how to implement babelify in this post I wrote.
3. Modularity and Dependency injection tools
<script src="module1"></script> <script src="module2"></script> <script src="module3"></script>
You would have to do this for every page. Not only that, you also have to check dependencies. What if module1 needs module 3 to function? You would have to rearrange them. What if you don’t need 3 scripts like in my example, but 10? It becomes hell.
Luckily we have libraries now like requirejs, browserify and webpack. They all solve the problem in their own way. I have used require and browserify and they both are good choices, as I am sure webpack is as well.
In browserify for example, you only need to put 1 script in your page, like:
Ok, cool stuff, but where do you manage your dependencies?
You manage it in the script file itself, in this case, app.js.
// module 3 var module1 = require('./module1.js'); var module2 = require('../lib/module2.js'); module1(); module2();
See that, in the module3 file we are importing the other 2 modules. In this case they are functions we can later use inside module3.
2. Task Runners
Task Runners automate tasks that are repetitive and boring for you to do when developing for the web.
There’s some options for you when choosing a task runner. I use Gulp. It’s in my opinion the easiest to learn how to use. You can read a comparison I made a few months back on task runners.
It’s my number 1 tool for manipulating the DOM, attaching event listeners and other tasks you always have to do in a website. Granted you can use the tools I listed in number 5 like react to manipulate DOM and handling events. But when you are building websites that don’t need to have a MVC framework, or don’t need a react component, guess what, jQuery is there for you.
If you liked this post, consider subscribing to my blog in order to get notified whenever I publish another article. No spam!