Do you remember when you got your first car? Did your life change? I bet it did. You might not count this as a life-changing event, you probably won’t talk about it to your friends and family at your retirement party as a monumental day in your journey to success, but I’d put money that it definitely changed your life. For me it meant I could go anywhere whenever I wanted, and most of the time quicker than before (not entirely due to my lead foot). I didn’t have to ask my parents for a ride or ask for their car, I didn’t have to wait for the bus, I didn’t have to walk or skateboard if I didn’t want to; I could just grab my keys and go on my own schedule. Without my car I could still get to most places that I wanted to get to in a reasonable time, but the convenience of my own car was awesome! This is a lot like the front-end world that we live in today.
There are dozens of well-known and production-ready
front-end libraries and
frameworks, hundreds more that encapsulate some of these, or custom libraries made for specific project needs. These are all tools that help you write front-end code better and more efficiently. Technically, these tools aren’t doing anything that isn’t currently possible with vanilla HTML, CSS, or JavaScript, but they enable you to write code quicker and sometimes in a way that might make more sense to you. I’m sure you’ve used many of these libraries already (
jQuery is used on over 60% of the top 100,000 websites), if not every day, but think back to when you weren’t using any of these tools.
So What?
“
Okay Tyler, there are a whole bunch of these frameworks and libraries, some are awesome. So what’s your point?”
-Harrison Ford (
may or may not have actually said this to me)
My point is that front-end development today is a lot different from what it was a few years ago, and it’s probably not going back to what it was. Today, writing your front-end code is quicker, more intuitive, and easier than what it used to be. Why would you decide to ask your dad for his car when you have your own ready to use? I use LESS and AngularJS every day, and while I am confident that I can still write great HTML, CSS, and JavaScript without the use of these tools, it would take me a lot longer to do it vanilla. A great feature of most of the tools out there is that you aren’t bound to their own syntax; I still write plain old front-end code every day, but I am integrating a lot of what’s made available to me in my front-end toolbox. Most of the time multiple frameworks and libraries can be completely independent of one another (and vanilla code for that matter) while playing together nicely.
Time to go shopping
When you got your first car was it the best car available? For some it could have been, but for most it wasn’t, and you had to make it work in the best way it could for your specific situation until it no longer fit your needs. That’s how I approach all of these frameworks and libraries. I’ve test driven some, I’ve rented some, and there are a handful that I love and use for most of my work. For me, LESS, AngularJS, Underscore, some NodeJS if the project allows, and jQuery when I absolutely need it are the ones that I almost always use on a project, but that doesn’t mean I’m ignorant of all of the other ones. Others that I’ve used include Backbone, Ember, SASS, and D3.
I can lay it all out for you in four points:
- Today’s front-end development very much includes using any number of the many front-end libraries and frameworks that are useful, tested, and active.
- Be careful not to use these tools as a big set of crutches. Most of these are extremely helpful but each may or may not be useful to the project you’re on.
- You don’t have to learn every single one inside and out, but it will be beneficial to learn features and differences of many of them so you can decide what is right for you and your project.
- Once you find one (or a few) that work well for you, don’t stop learning it just to learn something else. In this business it’s very beneficial to you to be T-shaped and not a “jack-of-all-trades-master-of-none” type.
“Please avoid this”