Introduction to Vue.JS

Getting Started with Vue.js in 2020

Resources

  • You can watch this documentary and learn about the story behind Vue.JS.
    • Note: this is not a technical tutorial, it’s about the people behind the framework and its evolution.

Duration: 35 minutes

Introduction to React

Introduction

Welcome to the React.JS course. Before diving into the technical nitty-gritty of React, let’s talk a little bit about the history of this popular JavaScript library.

In 2013, React.JS was introduced by Facebook, as a JavaScript library for creating and managing complex user interfaces. It does this by breaking up the interface into independent, composable and reusable chunks of code called Components, which have their own private memory (called the State). Components can be rendered inside the Browser, in the server or through a mobile app (when using React Native) depending on the choice and requirements of the application.

On top of that, React uses a Declarative programming style and abstracts all of the DOM manipulation methods away from us. Creating DOM elements, adding Event Listeners and updating the DOM accordingly can be done in a simpler and much easier fashion in contrast to the standard JavaScript DOM API.

Watch the selected part (up to 04:45) of this next video by Mosh Hamedani in which he talks about the history of React and the concepts of Components and the VirtualDOM.

React, Components and the VirtualDOM in a nutshell by Mosh Hamedani


How does React manage all this complexity and abstracts away the DOM API?

When working with HTML, each element or section of the interface is composed of multiple nested HTML elements. For example, let’s say we want to have a Subscription section:

<section class="subscribe">
    <h2>Subscribe to our Newsletter</h2>
    <hr>
    <p class="suscribe--info">Get whenever the latest release of our newsletter directly to your mailbox</p>
    <button class="subscribe--action">Subscribe</button>
</section>

Whenever we want to re-use this element in different pages or parts of a page, we need to copy and paste whole chunks of code, bloating our HTML code. Worse than that, whenever we want to update this element in some way we need to search through our codebase, find the recurring element and update it in multiple places, a process that is tedious, and most of all, highly error-prone. Is this breaking the D.R.Y. (Don’t Repeat Yourself) principle? Absolutely!

Facing the problems mentioned above, Facebook engineers came up with the brilliant idea of transforming these recurring chunks of code that belong to a single User Interface (UI), into custom HTML Tags called Components. Instead of repeating the same code again and again, it is being abstracted away and placed in a separate file, and a single custom Tag name is used instead, whenever we want the code to appear on our HTML pages.

For example, the previous code can now be placed in a separated file named Subscribe.js (React uses JavaScript to create Components) and a single custom Tag named Subscribe or Subscription can be used in its place, in any page and in any parts of our page. All relevant, element-specific code, including HTML, CSS, media assets and JavaScript, will be placed in a single separate file. Ingenious!

    <h1>Our Application</h1>

    <Subscribe></Subscribe>

    <main>Some content that spans lots of lines goes here...</main> 

    <Subscribe></Subscribe>

React takes a rather radical approach and introduces a new language which unifies HTML, CSS and JavaScript: JSX, short for JavaScriptXML. React developers can write their code in JSX and a special compiler called Babel.JS will transform their code back into HTML, CSS and JavaScript which the browsers can parse and display. A more conservative approach would be to use React with plain old JavaScript, but a lot of the benefits that come along with this powerful new language will be lost.

The reactive part of React comes into play when we bind (connect/sync) specific data to our interface. Whenever this data gets updated, the accompanying DOM elements get automatically updated.

Study: An Overview and Walkthrough

Complete the React Tutorial: An Overview and Walkthrough by Tania Rascia.

Study: Learn React on Scrimba

Complete the Learn React for free series of interactive screencasts at Scrimba.com. To complete the course you must spend around 6 to 7 hours watching the screencasts and and about three times this time to practice and write the code yourself and test it on your local enviroment.

Study: React Guide

Hungry for more React? Dive into the step-by-step official guide. This course will help you crystalize the fundamental concepts of React and write some more code. Remember: 20% theory, 80% code.

Resources

LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack? Search for: Kostas Minaidis (kostasx)

UPDATED: 29.12.2020

Feedback

  • Is there anything we can help with up to this point? Do you have something to suggest about this chapter? Let us know in the comments below.

Project: Frameworks

Introduction

The best way to actually learn something is to use it! We’ve directed you to basic tutorials and introductory material for each of the 3 biggest frameworks right now. For this assignment you need to select one of these frameworks and complete a simple project. A deep-dive into any of these frameworks will be up to you, but at this point you should have a good enough foundation to find your own way.

Assignment

  1. Select one of the big 3 frameworks.
  2. For this assignment you’ll be recreating one of our previous assignments using your framework of choice.. so look back at your previous work and select a project. I’d suggest either the library or the restaurant page. If you want to do the todo-list I’d suggest just doing a simplified version without projects.
  3. The actual implementation is up to you, but before you start consider which elements in your project are going to be their own components. Having a general idea of how your app is going to be organized is a great way to get started. This article while being about react is relevant for any of these frameworks. Read that and notice how they break the UI down into components.
  4. Build it baby! Good luck!

Student Solutions

Submit a solution with a pull request to this file on the Javascript Curriculum github repository. See the section on Contributing for how.

Show Student Solutions – Add your solution below this line! (Be sure to specify which framework and project you’ve completed!) * [miknick’s React Library](https://github.com/miknick/React-Library-Page) – [View in Browser](https://miknick.github.io/React-Library-Page/) * [Salvador Villalon’s Vue Restaurant Page](https://github.com/salvillalon45/theOdinProject-Frameworks) – [View in Browser](https://salvillalon45.github.io/theOdinProject-Frameworks/) * [Diane998’s Angular Library](https://github.com/Diane998/library) – [View in Browser](https://angular-library-git-master.diane998.vercel.app/) * [Scott’s React Restaurant Page](https://github.com/ScotttP/restaurant-page-react/tree/master/restaurant-page) – [View in Browser](https://scotttp.github.io/restaurant-page-react/) * [Rizwan’s React Library](https://github.com/xRizwan/react-library) – [View in Browser](https://xrizwan.github.io/react-library/) * [nearmint’s Vue.js Library](https://github.com/nearmint/vue-library) – [View in Browser](http://nearmint.github.io/vue-library) * [ray0h’s React ToDo App](https://github.com/ray0h/ToDoApp-React) – [View in Browser](http://ray0h.github.io/ToDoApp-React) * [Joshua’s React Library](https://github.com/joshua-a-jones/react_library_app/) – [View in Browser](https://joshua-a-jones.github.io/react_library_app/) * [Kevin’s React Library](https://github.com/Kevlar2222/library) – [View in Browser](https://Kevlar2222.github.io/library/) * [ergunirem’s React Library](https://github.com/ergunirem/react-library) – [View in Browser](https://ergunirem.github.io/react-library/) * [kaliberpoziomka’s React Todo List](https://github.com/kaliberpoziomka/todolist-react) – [View in Browser](https://kaliberpoziomka.github.io/todolist-react/) * [vonhoro’s React Library](https://github.com/vonhoro/Restaurant-with-React) – [View in Browser](https://vonhoro.github.io/Restaurant-with-React/) * [Ideopunk’s React Library](https://github.com/Ideopunk/react-library) – [View in Browser](https://ideopunk.github.io/react-library/) * [Lucio’s React Todo List](https://github.com/JCarlosLucio/react-todo-list) – [View in Browser](https://jcarloslucio.github.io/react-todo-list/) * [Zayeer’s React Todoo](https://github.com/Zayeer/todoos/tree/master) – [View in Browser](https://zayeer.github.io/todoos/) * [guyroberts21’s React Library](https://github.com/guyroberts21/react-library) – [View in Browser](https://guyroberts21.github.io/react-library/) * [Juan Oxmar’s Library w/ React](https://github.com/juanoxmar/reactLibrary) – [View in Browser](https://juanoxmar.github.io/reactLibrary/) * [Carl D’Oleo-Lundgren’s Vue Library](https://github.com/carldoleolundgren/library-vue) – [View in Browser](https://carldoleolundgren.github.io/library-vue/) * [Sher’s React Restaurant](https://github.com/sher-s7/react-restaurant-page) – [View in Browser](https://sher-s7.github.io/react-restaurant-page/) * [Andrija’s Solution](https://github.com/Amdrija/todo-list-app) – [View in Browser](https://amdrija.github.io/todo-list-app/) * [Korak’s Solution](https://github.com/Korak-997/todo-Vue-App/tree/source-code) – [View in Browser](https://happy-raman-a16efe.netlify.app/) * [Andres Ruiz’s Vue Library](https://github.com/Andrsrz/library-vuejs) – [View in Browser](https://andrsrz.github.io/library-vuejs/) * [Odunsi’s(dhatguy) React Library](https://github.com/dhatGuy/library/tree/react-library) – [View in Browser](https://rebrand.ly/e5509) * [hieu-ng’s Vue Todo List](https://github.com/hieu-ng/vue-simple-todolist) – [View in Browser](https://hieu-ng.github.io/vue-simple-todolist/) * [Luky’s React Library](https://github.com/lcyne/book-list/) – [View in browser](https://lcyne.github.io/book-list/) * [Ylli’s React Library](https://github.com/yllabazi/myLibrary-ReactJS) – [View in Browser](https://yllabazi.github.io/myLibrary-ReactJS/) * [Andrey’s React To-Do list solution](https://andreyskopintsev.github.io/react-todo) * [Jdonahue135’s React Library solution](https://github.com/jdonahue135/react-library) * [mjwills-inf’s Vue Library solution](https://github.com/mjwills-inf/-TOP-library-vue) – [View in Browser](https://mjwills-inf.github.io/-TOP-library-vue/#/) * [Lenny’s React solution](https://github.com/Lenn-e/react-practice) – [View in Browser](https://lenn-e.github.io/react-practice/) * [Disco Trooper’s Vue solution](https://github.com/disco-trooper/library-vue) – [View in Browser](https://disco-trooper.github.io/library-vue/) * [Edd Sansome’s React solution](https://github.com/casualc0der/burger-bar-react) – [View in Browser](https://casualc0der.github.io/burger-bar-react/) * [Simon Fraipont’s React library solution](https://github.com/Sim-frpt/react-library) – [View in Browser](https://sim-frpt.github.io/react-library/) * [James’s React Library Solution](https://github.com/ericksen-github/library_react) – [View in Browser](https://ericksen-github.github.io/library_react/) * [clavierbulb-green’s React Library Solution](https://github.com/clavierbulb-green/React-Library) – [View in Browser](https://clavierbulb-green.github.io/React-Library/) * [Kevin Vuong’s React Library Solution](https://github.com/fffear/react-lib) – [View in Browser](https://fffear.github.io/react-lib/) * [Braxton Lemmon’s React Library Solution](https://github.com/braxtonlemmon/book-library-react) – [View in Browser](https://braxtonlemmon.github.io/book-library-react/) * [Zakariye Yusuf’s React ToDoList Solution](https://github.com/ZYusuf10/timelyRe) – [View in Browser](https://zyusuf10.github.io/timelyRe/) * [Bollinca’s React Library Solution](https://github.com/bollinca/library-react-version) – [View in Browser](https://bollinca.github.io/library-react-version/) * [Brendaneus’ React Library Solution](https://github.com/Brendaneus/the_odin_project/tree/master/javascript/react-library) – [View in Browser](https://theodinprojects.live/courses/javascript/projects/react-library) * [Martink-rsa’s React ToDoList Solution](https://github.com/martink-rsa/ToDoList_React_MUI) – [View in Browser](https://todolist-martink-rsa.netlify.com/) * [Elias White’s Angular Library Solution](https://github.com/elias-white/AngularLibrary) – [View in Browser](https://elias-white.github.io/AngularLibrary/) * [Igorashs’s Vue Solution](https://github.com/igorashs/vue-todo-list) – [View in Browser](https://igorashs.github.io/vue-todo-list/) * [Bojo’s React Solution](https://github.com/BojoZahariev/Restaurant_react) – [View in Browser](https://bojozahariev.github.io/Restaurant_react/) * [Vedat’s React Solution](https://github.com/mvedataydin/react-todo) – [View in Browser](https://mvedataydin.github.io/react-todo/) * [Solodov’s Vue Solution](https://github.com/solodov-dev/todo-vue) – [View in Browser](https://solodov-dev.github.io/todo-vue/) * [Eljoey’s React TodoList Solution](https://github.com/eljoey/React-todo-2) – [View in Browser](https://eljoey.github.io/React-todo-2/) * [Henry Kirya’s Svelte Solution](https://github.com/harrika/library-svelte) – [View in Browser](https://harrika.github.io/library-svelte/) * [ARaut9’s React Library](https://github.com/ARaut9/book_library_react) – [View in Browser](https://araut9.github.io/book_library_react/) * [Jason McKee’s Vue Library](https://github.com/jttmckee/vue-library) – [View in Browser](https://jttmckee.github.io/vue-library/) * [Andrew’s Vue.js Solution](https://github.com/andrewr224/readersite) – [View in Browser](https://andrewr224.github.io/readersite/#/) * [autumnchris’s React Library Solution](https://github.com/autumnchris/reading-list-reactjs) – [View in Browser](https://autumnchris.github.io/reading-list-reactjs) * [nmac’s Solution](https://github.com/nmacawile/ng-to-do-list) – [Angular To-do List](https://ng-to-do-list-239a2.firebaseapp.com) * [Tamerlan1993’s Todo-list Solution](https://github.com/Tamerlan1993/hactktoberfest-2018/tree/master/vuex-todo-app) – [View in browser](https://vuex-todomvc-1.netlify.com/) * [Luján Fernaud’s React book-library Solution](https://github.com/lujanfernaud/react-reading-list) – [View in browser](http://lujanfernaud.com/react-reading-list/) * [Devon’s React todo-list Solution](https://github.com/defitjo/react-todo-app) * [Alexfuro’s React book-library Solution](https://github.com/alexfuro/odin-books-react) * [Katineto’s React todo-list Solution](https://github.com/Katineto/avocado) – [View in browser](https://katineto.github.io/avocado/) * [Caner Sezgin’s Solution](https://github.com/CanerSezgin/TodoList/tree/master/Source%20Codes) – [View in browser](https://canersezgin.github.io/TodoList/) * [Javier Machin’s Solution](https://github.com/Javier-Machin/react-simple-library) – [View in browser](https://javier-machin.github.io/react-simple-library/) * [Areeba’s Vue TodoList Solution](https://github.com/AREEBAISHTIAQ/Todolist) – [View in browser](https://areebaishtiaq.github.io/Todolist/) * [Taylor J’s React TodoList Solution](https://github.com/taylorjohannsen/react-todo) – [View in browser](https://taylorjohannsen.github.io/react-todo/) * [Halkim44’s React Library App Solution](https://github.com/halkim44/react-my-library/tree/master) – [View in browser](https://halkim44.github.io/react-my-library/) * [Tronerta’s Vue Todo-List Solution](https://github.com/Tronerta/vue-todolist) – [View in browser](https://morning-meadow-39929.herokuapp.com) * [Yash’s React Todo-List Solution](https://github.com/yashboura303/todoReact) * [Kai’s React Library Solution](https://github.com/KaiVandivier/library-react) – [View in Browser](https://kaivandivier.github.io/library-react/) * [Aron’s Solution (Restaurant Page)](https://github.com/aronfischer/react_restaurant_page) – [View in Browser](https://aronfischer.github.io/react_restaurant_page/) * [Emil Dimitrov’s React Page](https://github.com/edmtrv/game-page-react) – [View in Browser](https://edmtrv.github.io/game-page-react/) [React Library](https://github.com/edmtrv/game-library-react) – [View in Browser](https://edmtrv.github.io/game-library-react/) * [Edehlol’s React Library Solution](https://github.com/edehlol/react-library) – [View in Browser](https://edehlol.github.io/react-library/) * [Vorelli’s React Library Solution](https://github.com/Vorelli/Angular_Library) – [View in Browser](https://vorelli.github.io/Angular_Library) * [mmboyce’s React Restaurant Page Solution](https://github.com/mmboyce/restaurant-page-react) – [View in Browser](https://mmboyce.github.io/restaurant-page-react/) * [Mo’s React Todo App Solution](https://github.com/hamohuh/react-todo/tree/gh-pages) – [View in Browser](https://hamohuh.github.io/react-todo/) * [JoshAubrey’s Vue Restaurant Page Solution](https://github.com/JoshAubrey/vue-restaurant-page) – [View in Browser](https://joshaubrey.github.io/vue-restaurant-page/) * [0xtaf’s React Restaurant Page Solution](https://github.com/0xtaf/react-restaurant) – [View in Browser](https://0xtaf.github.io/react-restaurant/) * [barrysweeney’s React Rock Paper Scissors Solution](https://github.com/barrysweeney/react-rock-paper-scissors) – [View in Browser](https://barrysweeney.github.io/react-rock-paper-scissors/) * [ranmaru22’s Angular Library Solution](https://github.com/ranmaru22/ng-library) – [View in Browser](https://ranmaru22.github.io/ng-library/) * [thecodediver’s Solution](https://github.com/thecodediver/library_react) – [View in Browser](https://thecodediver.github.io/library_react/) * [Rey van den Berg’s Solution](https://github.com/Rey810/library-react) * [Joe Thompson’s Library Solution](https://github.com/jlthompso/library_react) – [View in Browser](https://jlthompso.github.io/library_react/) * [Ricardo’s React Library Solution](https://github.com/ricardo-gonzalez-villegas/library-react-app/tree/master) – [View in Browser](https://ricardo-gonzalez-villegas.github.io/library-react-app/) * [Ricardo’s React Restaurant Solution](https://github.com/ricardo-gonzalez-villegas/restaurant-react-app/tree/master) – [View in Browser](https://ricardo-gonzalez-villegas.github.io/restaurant-react-app/) * [Tim Kelly’s React Library Solution](https://github.com/timkellytk/project-react-library) – [View in Browser](https://timkellytk.github.io/project-react-library/) * [FortyPercentTitanium’s Todo List Solution](https://github.com/fortypercenttitanium/todoreact) – [View in Browser](https://fortypercenttitanium.github.io/todoreact/) * [Nijepa’s Vue ToDo List Solution](https://github.com/nijepa/todo-list-vue) – [View in Browser](https://nijepa.github.io/todo-list-vue/) * [jooji-san’s React Library Solution](https://github.com/jooji-san/library-react) – [View in Browser](https://jooji-san.github.io/library-react/) * [MatyD’s React Library Solution](https://github.com/MatyD356/remeked-lib/tree/master) – [View in Browser](https://matyd356.github.io/remeked-lib/) * [themetar’s React Library Solution](https://github.com/themetar/library-app-react) – [View in Browser](https://themetar.github.io/library-app-react/) * [Chandra’s React Tic Tac Toe Solution](https://github.com/CodeSurfer3022/Tic-Tac-Toe-React) – [View in Browser](https://codesurfer3022.github.io/Tic-Tac-Toe-React/) * [Chandra’s React Todo list Solutin](https://github.com/CodeSurfer3022/Todo-list-React) – [View in Browser](https://codesurfer3022.github.io/Todo-list-React/)

Material based on Erik Trautman | The Odin Project

Vue.JS

Introduction

VueJS was created by Evan You, it’s the youngest of the popular frameworks, but it’s quickly rising popularity proves that it’s worth paying attention to. Vue is known for being one of the easiest frontend frameworks to learn while still having the same scalable power as other popular frameworks.

Overview

Vue is awesome (and easy to learn) because it utilizes what already exists on the web. The Vue way is to use real html and css to build applications, you do not need to learn anything new such as JSX. Vue components have a very clean structure. A medium to large Vue application will usually be structured in single-file components and the separation of concerns template (html) script (javascript) and style (css) makes it a dream to work with, keeping your code organized and clean. Here is an example from the official Vue docs of what a "hello world" single-file component would look like: image The Vue ecosystem is another reason for its popularity. Unlike other frameworks that utilize external libraries to integrate state management or router for example, Vue has official libraries for most of these which were developed by the Vue team themselves, such as Vuex (comparable to redux), vue-router (comparable to react-router). All these are great reasons to pick this amazing framework as your frontend main tool. One downside is that unlike the other popular frameworks, Vue was not created nor is it backed by a large company (although it has significant support by large companies). Therefore, depending on where you are in the world, the job demand for Vue is noticeably lower than React and Angular.

Getting Started

You can quickly start playing around with vue via the cdn by including

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

in your project, jsfiddle or codepen. You can follow the installation project here. This is perfect for small projects, if you just want to manipulate only certain parts of the dom (*cough* replace jquery *cough*) .

For complete Vue projects you can use the vue-cli by installing it npm install -g @vue/cli or yarn global add @vue/cli and easily create a project with vue create name-of-your-project or vue ui.

Assignment

  1. Read the ‘Getting started’ in the official Vue doc, specially check out the "declarative rendering" section and try it out in JSFiddle or CodePen.
  2. Check out this awesome complete getting started blog guide here. Read the first three sections including "Writing Our First Vue.js 2.0 App" and follow along to see how easy it is, and if you find it nice I definitely recommend reading the whole thing.

Additional Resources

  • This massive udemy course is not free, but will teach you pretty much everything you need to learn about Vue, and you can often get Udemy courses for a decent discount.
  • Learn Vue for free in laracasts
  • Here is a free crash course on vue just to show you can learn vue in about 2 hours.
  • Here is a nice video comparing all the popular frontend frameworks.

Material based on Erik Trautman | The Odin Project

React

Introduction

React was created by Facebook in 2013 to help with creating user interfaces. It quickly became a popular framework and many companies use it for their own web development needs. It is often used to create single-page applications.

Overview

React is used most in conjunction with the react router to create single-page web-applications that feel like multi-page websites. This can make websites feel very fast when a user does not have to wait for different pages to load. It can also reduce strain on the server by having the client render the requested web page for you.

This framework’s most defining feature is its components. React was developed to be modular, and have easy to use ‘parts’ that can be plugged into different parts of your application. React heavily uses a syntax called JSX, which is an html like syntax for JavaScript (This can be used without react, as it is just syntactic sugar over creating DOM elements manually using document.createElement('div'), for example). Anything written in react is simply javascript, and can be treated as such. React stays performant by utilizing what they call a virtual DOM. The framework utilizes this virtual DOM by comparing it with the real DOM to tell which elements need to be updated and which ones do not. This keeps react fast.

React is not only limited to the web. React Native can be used to develop cross-platform mobile applications with the same languages you are familiar within the web browser.

A note about Redux:

When reading about the React framework, one might hear the term ‘redux’ thrown around. Redux is not exactly a part of React and can be used separately from it. Redux is a way to manage the state of an application. While React containers, (a type of React component), have state themselves: redux handles the state of the entire application by using a single point of truth, making the application easier to manage for a developer. If you don’t know if you need redux, you probably don’t, as stated on their website. If you choose to go deep in learning React you will eventually want to learn Redux as well. However it is best to learn vanilla React first.

Getting Started

Facebook has made getting started with React really easy. They have developed a tool that takes care of configuring webpack and babel and provides some boilerplate to get you started. This tool is called create-react-app and many tutorials will start with this application. To install, run npm install -g create-react-app. Since this is a utility to create, and download the needed components of a react app, it is a good idea to install this globally. Next you can run create-react-app my-app to have the tool setup the application for you. When the utility is done running, you should see some information on the screen on how to run the application. Follow these directions and your browser should open with a page saying "Welcome to React". You’re ready to start hacking!

Assignment

  1. This tutorial directly from the React team, uses create-react-app to get you started. In general the official React docs are a great way to learn. They are clearly written and will stay up to date much more reliably than 3rd party tutorials.
  2. This tutorial is a deeper dive into react.

Additional Resources


Material based on Erik Trautman | The Odin Project

Angular

Introduction

First released back in 2012 by Google, AngularJS was the first big-hitter in Single Page Application(SPA) frameworks. A big appeal of AngularJS was its unobtrusive approach as you could control which parts of your page interacted with the AngularJS framework.

In 2016 Angular 2 was released simply named Angular. The reasoning was that this was a groundbreaking update with no backwards compatibility with AngularJS and therefore represented a new version that would be taken forwards.

The lack of backwards compatibility with AngularJS meant it lost a lot of trust with the developer community as entire applications would have to be rewritten from scratch to use the new Angular framework. Many see this as the reason React, and to a lesser extent VueJS, gained huge traction in the frontend framework space.

Since Angular’s release, it has ensured no further groundbreaking changes with backwards compatibility maintained across versions.

At the time of writing version 6 has just been released.

Overview

The first thing to know if you want to give Angular a try is that it’s built with Typescript, a superset of Javascript that gives you static typing, interfaces, classes, namespaces and many other features that Javascript doesn’t natively support. All valid Javascript is valid Typescript so it’s not a completely new language to learn but it does have some differences from traditional Javascript. If you want to learn Angular you should get familiar with Typescript.

Some of the main benefits of using Angular are:

  • It’s well supported on the main platforms (web, desktop and mobile)
  • It’s built on design pattern principles so when code is written well it remains maintainable as the project scales
  • It comes with many tools out of the box that you’ll need on a day to day basis. Forms, validations and AJAX requests all come with dynamic page support so you can get crafting incredibly quickly
  • It encourages decoupling of concerns. This means components are injected where needed which ensures changes to parts of your application don’t break other parts
  • Application logic is kept away from your views keeping your HTML clean
  • Testing is actively encouraged so Angular was built with unit testing and application testing support embedded.

Importantly, Angular is also actively maintained by a very large community which includes Google. Knowing your chosen framework is going to be updated to keep it current is a necessity for production applications. You can’t afford to rewrite sites in a new framework often.

While there are many positives to choosing Angular there are some drawbacks.

  • Because of its coupling to Typescript you will need to learn that to really grok Angular. Any examples you see online will be written in it and any support you’ll receive from the community will probably assume you’re using Typescript
  • Angular makes good use of the command line so you’ll need to delve into the Angular CLI
  • The Node Package Manager(npm) is used extensively so you’ll need a firm grasp of that
  • Tests can become very complex but essential when the app grows so you need a solid understanding of test principles

Aside from Angular’s coupling to Typescript all those other drawbacks can be found in other frameworks too so they aren’t necessarily a reason to avoid Angular.

Probably the biggest drawback is that Angular is a huge and complex framework (think Rails compared to Sinatra) so it can have a long learning curve to master and may feel like overkill for small projects you’ll make yourself.

Getting Started

The easiest way to get started is to follow the guide on the Angular Site. That will take you through installation and editing your first components.

You will need node and npm installed. I personally prefer to use nvm to manage my node versions but however you want to do it is up to you.

Assignment

  1. Follow along with the getting started guide on the Angular Site and ensure you have your environment set up correctly
  2. Skim through this Angular Fundamentals guide on the architecture of an Angular app to get a high-level overview of how an app is put together
  3. Try this Angular 8 Tutorial to get an idea of the power of using a framework like Angular

Additional Resources

  • Angular has their own tutorial you can try
  • This blog explains whats new in Angular 6
  • These 33 free interactive screencasts by Dan Wahlin take you from beginner to advanced to help you gain a solid understanding of the Angular framework

Material based on Erik Trautman | The Odin Project

Introduction to Frameworks

Front-end Frameworks

By this point you have probably heard about JavaScript frameworks such as React, Angular or Vue. Almost all major web apps being built today use frameworks and many job postings ask for experience with at least one of them. But what are they? We aren’t going to spend too much time teaching you all the nitty-gritty details of each of these frameworks, but knowing what they do and how to get started with one of them is crucial in todays web-dev world.

What is a framework?

Essentially a framework is some JS code that makes it faster and easier to write interactive web apps with reusable components. If you have completed odin assignments such as the restaurant page, the library, or the todo-list you will know that you spend a lot of time manipulating the DOM with code like document.createElement or element.innerHTML. Every time you wanted to change some data like marking a todo complete, or adding a book to your library you had run a function that updates your entire page just to keep your view in sync with the data. This is a very verbose and error-prone way of doing things!

Frameworks are there to ease that pain! The frameworks will automatically and efficiently keep your UI in sync with the data in your app. All the tedious code you had to write manually is now abstracted away letting you focus on more productive things.

The various frameworks (there are a lot of them) tend to have a few things in common. In general any given JS framework will have at least some sort of templating system that allows you to create reusable components (A templating system is nothing more than the ability to create bits of code that you can reuse). These components can be thought of as building-blocks that you use to build your project. For example, you could have a header and a footer component that you re-use on all your pages, or you could have something like a card component that nicely wraps whatever you put inside of it with a div and a box-shadow or border.

Imagine the power of being able to do something like this as many times as you like across your whole project to get a nice looking card:

<my-card-component>
  <h1>Card title</h1>
  <p>Card Content</p>
</my-card-component>

The way that these components are created differs greatly between frameworks, but re-usuable components are the foundation of all frameworks.

Most frameworks also include some sort of state-management system. State management means that your components can know certain things about the current environment and then present themselves differently based on those variables. For example if you have a header component with a log-in button you would want to show it only when the user is not logged in (or replace it with a log-out button). Somewhere in your app (again, this will differ greatly from framework to framework) you will have a variable like isUserLoggedIn that you can use to change the header-component content.

Different frameworks will have various other tools built-in (or easily included with plugins) such as routing (changing the view based on the URL), rendering arrays as lists, and animation. In essence frameworks make creating complex and robust web applications much easier.

Which framework then?

It’s no secret that there are a ton of Front-end frameworks in the world… so selecting one to learn is a daunting process. Here’s an incomplete and unordered list of JS frameworks you may have heard of.

Picking which framework to learn comes down to a few considerations. First and probably most importantly is your goal in learning. If you are looking to get a job or internship as soon as possible then you are going to want to look at which framework occurs most frequently in job-postings in your area. If you are looking to pick up a framework quickly to build a side-project, then you might consider which one seems easiest to getting started. If none of that matters to you then you can just pick whichever one suits your preferences at the moment.

The good news is that it doesn’t really matter which framework you select. Most of the big ones are similar enough that once you’ve learned one transitioning to another is relatively simple. If you’ve already mastered React, for example, but then notice job-postings that ask for experience with Vue, you will likely be able to pick up Vue and start using it in less than a week.

The rest of this section will go through the 3 most popular front-end frameworks (React, Angular and Vue), tell you a bit about them, and offer resources to get you started.

Assignment

  1. Spend a little time poking around the sites for various frameworks above to get a feel for what’s out there.
  2. Check out this recent survey to get a feel for the general popularity and usage of the various frameworks.
  3. This survey is not JS or web centered, but includes some data about frameworks.
  4. This video gives a good overview and comparison of the ‘Big 3’.

Additional Resources


Material based on Erik Trautman | The Odin Project