High level overview of Javascript Front End Frameworks
Notes on Vue
Released in 2014
- Vue was designed to be flexible and incrementally adoptable. Meaning that you can add Vue at any point during the development process. You can use it either as a library (aka, minimal Vue interaction) or as a full framework.
- One of the main ways that people use Vue is by building single file components. This is when we have Javascript, HTML and CSS for this component within a single file.
- pros:
- short learning curve for JS devs
- lightweight
- highly compatible with most projects
- cons:
- difficulty with older browsers
- limitations in plugins/libraries in comparison to other frameworks
/App.vue
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">{{ message }}</div>
<script>
const { createApp } = Vue
createApp({
data() {
return {
message: 'Hello, World’
}
}
}).mount('#app')
</script>
Source: https://vuejs.org/guide/quick-start.html
Notes on Angular
AngularJS released in 2010, Angular released 2016
- AngularJS came first, but as of 2022 it is no longer being updated.
- In 2016, Angular was released. It is a rewritten version of AngularJS, and it is not cross compatible. Meaning that, generally speaking, an AngularJS project will need to be extensively adapted to be able to support Angular.
- Angular is designed to make updating as straightforward as possible.
- Angular was built for easy scalability, from single-developer projects to enterprise-level applications.
- pros:
- huge community and history
- loads of libraries available
- cons:
- steep learning curve
- high complexity
- need to be aware that it is different from AngularJS
- meh?: corporate backing by Google (could be a pro or a con, depending on your view of corporate maintenance of frameworks)
/hello-world.component.js
import { Component } from '@angular/core';
@Component({
selector: 'hello-world',
template: `
<h2>{{ message }}</h2>
<p>This is my first component!</p>
`
})
export class HelloWorldComponent {
message = 'Hello, World!';
}
/index.html
<hello-world></hello-world>
Source: https://angular.io/guide/what-is-angular
Notes on React Native
Released in 2015
- Mobile app development using code based on React.
- pros:
- short learning curve for React developers
- supports both iOS and Android
- cons:
- debugging can be a pain (devs need to leverage a debugging library for development of React Native)
- complex smartphone gestures are not fully supported
- will require expanding your knowledge of both mobile engineering and web development.
- meh?: corporate backing by Facebook (could be a pro or a con, depending on your view of corporate maintenance of frameworks)
/App.jsx
import React from 'react';
import {Text, View} from 'react-native';
const HelloWorldApp = () => {
return (
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<Text>Hello, world!</Text>
</View>
);
};
export default HelloWorldApp;
Source: https://reactnative.dev/
Notes on Next.js
Released in 2016
- Next.js is a React framework. It comes bootstrapped with an assortment of libraries for building out your React app. Similar experience to
create-react-app, the command to start out a Next.js app iscreate-next-app. - Includes features such as file based routing and the pre-rendering of HTML.
- pros:
- quick way to get a site up and running
- great choice of tools right out of the box
- feels like an upgrade to React without being too heavy.
- cons:
- opinionated (you’re committing to a set of pre-installed dependencies)
- not as many available plugins in comparison to other React based frameworks
Source: https://nextjs.org/
Notes on Gatsby
Released in 2015
- Like Next.js, Gatsby is a React framework. It is also bootstrapped with an assortment of libraries, and can also be created with just one command. In Gatsby's case, this is
npm init gatsby. Netlify acquired Gatsby in early 2023. - pros:
- like Next.js, easy to get up and running in development
- LOADS of plugins available
- cons:
- opinionated (you’re committing to a set of pre-installed dependencies)
Source: https://www.gatsbyjs.com/