Exploring Front End Frameworks
Merry Christmas and Happy New Year! DigitalCrafts is an immersive bootcamp, but it’s not barbaric so we were treated with a week break for the holidays. I decided to keep learning in that off time because I have no friends or family to spend time with. Self deprecating humor aside, I actually did have a lot of free time that I wanted to use productively.
So what was the challenge for myself? I set out to learn, at least the basics, of some front end frameworks. Now I was always intimidated to learn one of these frameworks because I somehow had the idea that it was a full stack tool. Perhaps it was because they were always mentioned together with back end technologies with words like the MEAN stack, and phrases like “pick a javascript framework for your full stack application”. But to my surprise these frameworks are much simpler than that. So I wanted to dispel the scariness of these buzzwords.
It’s Just JQuery On Steroids!
So first, what are these exactly? The frameworks are just tools to help you create UI and user experiences. Doesn’t that sound familiar? Yeah, it’s basically what you’ve always used jQuery for. So what sets it apart from the more common jQuery that we’re all taught from the beginning? Well the first biggest difference is that DOM manipulation no longer happens with the actual document, instead it creates and renders a virtual DOM. If you’re wondering why this is useful, it’s mainly for speed and abstraction from the client side.
To put lamely, jQuery waits to load the actual document before it can interact with it, whereas something like React does all the processes before it loads the document. You may have run into a situation before where you wanted to change something on the web page with jQuery, but when you do, there’s either a load time or a weird flicker. It’s not so bad on a smaller app, but when your page gets bigger it offers a bad user experience.
Components: DIY HTML Elements
One of the biggest draws of Vue and Angular is that you can write JavaScript in your HTML. Or in the case of React, write HTML in your JavaScript. So you don’t have to write some wonky code like document.createElement, you can now just stick a for loop in you li tags.
This concept is further emphasized with components. You can just build your own html elements and once you’re finished put it in your markup as it’s own app tag.
Back In The World Of Compiling
So what’s the downside of using these technologies? Well no longer can you just drop it in a script tag, you now have to compile your code into plain vanilla javascript code so the browser knows what to do. So we’re back in the world of real programming where compiling exists.
There are many other benefits that comes from using these technologies. There are plenty of resources out there about Angular, React and Vue; specific benefits, which to choose, and so on. You can easily read more information on it than I can personally offer.
To Each Their Own
I know the consensus is that Vue has the lowest learning curve, but I’d have to disagree, I honestly think it depends. Vue is definitely easier for those that are focused on web development. Each vue file is similar to some web tools out there like codepen and jsfiddle, where you have access to HTML, CSS and JavaScript at a glance. Whereas React comes from a “everything is javascript” perspective, so it will come more naturally to those that think programmatically. Personally I found React much easier to pick up.
Without question Angular comes with the highest learning curve of all as it requires you to learn TypeScript to use it. In contrast Vue and React suggests that you learn the ES6 version of JavaScript, but it’s not required. However TypeScript isn’t too difficult to pick up for those familiar with other programming languages like Java or Swift. It’s a static typed and more object oriented version of JavaScript. So if you’re a programmer coming from outside of web development, you may feel right at home with Angular.
