Introduction to Javascript Frontend Frameworks: What framework is for me?
What are Frameworks?
Javascript has been evolving! Code that used to be run by servers are now being transferred to the browser. So, imagine thousands of lines of code…That sounds scary, especially when all you wanted to do was a hello world program or a simple registration form? Well, that’s where frameworks come in to save us the trouble!
React
React is the most used and widespread framework that we’ll be discussing. It was actually created by Facebook and it’s a great tool for building UI components. It is well-known because of its simple and flexible feel to coding. It’s also widely used by big companies such as Facebook, PayPal, Uber, Instagram, and Airbnb.
How it works
It works by handling standardised components in order to build elements of a website. Think of them as building blocks already laid out for you instead of making each part meticulously line by line. This allows for less code for developers and easier focus on deeper functionality. Additionally, you code everything in Javascript, even the HTML and CSS.
How do I get started?
If you like learning by doing, check this out from React themselves!
Tutorial: Intro to React — React
Angular
Angular is a framework working with HTML and Typescript to build single-page client applications. It’s broken down into the Angular components which can be broken down into modules. Typescript can be defined as an extension of Javascript but it is a standalone programming language. It’s used for more powerful web applications.
How does it work?
Angular uses typescript as its main language. It works using templates, directives, decorators, and NgModules, and data binding (This seems scary but essentially it’s really just organisation of code and use of Object Oriented programming principles!). It has similar logic to React and Vue, however it’s architecture may be a bit confusing at first glance — and that’s okay! Just take your time to practice and see it for yourselves.Read more about it here: https://angular.io/guide/architecture
How do I get started?
Angular is the most advanced of the frameworks discussed here however it has great potential for getting the details because of its refinement and this was actually designed by Google!
Check out this very simple codelab that introduces you to the basics of Typescript and Angular one small step at a time!
Vue
Vue.js is my preferred framework to use right now. It is a progressive framework, this simply means that is very adaptable and easy to integrate with other libraries. This is definitely one of the simpler frameworks, but that doesn’t mean that it lacks horsepower in terms of functionality.
How does it work?
It’s very similar to React in a lot of ways however it makes use of HTML, CSS, and Javascript. It also makes use of components and props but there’s a slightly different feel to how it looks and makes it feel more organised, in my opinion.
How do I get started?
The Vue documentation is a good way to start and it has a pretty vibrant community! I also suggest watching this crash course as it got me through my transition to learning frameworks!
Learn Vue 3 for Beginners — Full 2020 Tutorial Course
So how do I choose?
In the end, frameworks are powerful tools that allow you to gain more control of the content of your websites and change the future of web development. When it comes to choosing a particular framework it all boils down to preference and feel as well as the needs of the project/stakeholder.
A lot would say Vue is a good start in the world of frameworks as it can work just as well as the other two frameworks and is easy to learn, but that is up for debate. When working on a project, check the scope, available tools, and needs then decide on a framework from there. Conduct further research on your own and remember that learning about frameworks needs sound knowledge on other aspects of Web development like CSS, Accessibility, Object Oriented programming, and some concepts on the Backend side to help you grow as a developer!
I suggest getting your hands dirty and code! Try things out and create small projects, connect with people and don’t be afraid to ask! Create your own website. Keep track of repeating code in your repository and see how you can apply the use of components and props. If you already have a site to base on, check out what parts of the code you can improve or see if you have big chunks of code that you think someone has already done before.
Github is rich in these examples and you’ll always have a great community around you. Make a StackOverflow account, find a mentor, and do not be afraid to ask. Try to be active in the ADMU tech orgs and reach out! A lot of the people you think are amazing in Web development started out just like you and are still learning, so I promise that many of them are willing to help you out.
Feel free to add me on Linkedin (https://www.linkedin.com/in/franztaborlupa/), I’d be more than happy to have a coffee session with you to just chat, discuss the next steps, or answer any questions you might have!
