Front End Frameworks - Google

Advanced

Approx. 8 weeks

Assumes 6hrs/wk (work at your own pace)

Built by Join thousands of students Course Summary

Learn how to build Single Page Applications in various Front End Frameworks! In this course, you'll learn how to create both an Angular application and an Ember app from scratch.

As you work through the course, you'll learn key architectural design techniques that make frameworks incredibly powerful.

Why Take This Course?

In this course, you’ll explore popular JavaScript frameworks that make building complex web applications a lot easier! Follow along as you build interactive, single-page applications that work seamlessly in the browser without ever reloading the page.

Filled with deep dives, code examples, and practical advice, you’ll uncover the magic behind JavaScript frameworks and what makes each of them unique.

Prerequisites and Requirements

Students should have experience building sites with HTML and CSS. JavaScript is heavily used in Front End Frameworks, so two years of programming experience in JavaScript is recommended. This course builds on:

• JavaScript Design Patterns
• Object-Oriented JavaScript
• Web Tooling & Automation

Other course requirements:

• Ability to use GitHub to clone repos and checkout branches
• Comfort with command line tools
• Ability to use Chrome DevTools

See the Technology Requirements for using Udacity.

What Will I Learn? Projects Project 4: Corporate Dashboard You must develop a corporate dashboard application using a front-end MVC framework of your choosing. The dashboard application must contain a header (with the currently selected dashboard’s name); a menu, allowing the user to navigate between dashboards; and the primary dashboard display area. You should find, or create, your own data files in CSV and JSON formats to provide data to the dashboards. The required dashboards are: 1. A geospatial view, identifying the number of employees at various company locations. 2. A “key metrics” view, containing components displaying: the number of open issues, a line chart reflecting number of paying customers over a period of time, and a bar chart reflecting number of reported issues over a period of time. 3. A “data view” of all issues, with an appearance similar to a spreadsheet, that is sortable and filterable. Syllabus Lesson 1 - Building a Single Page Application

• How did we get here?
• What makes a Single Page App
• Core Framework Components

Lesson 2 - Examine A Framework's Source

• Constructor Functions
• Underscore's Template Function
• Events and Routing in Backbone

Lesson 3 - Angular

• Build a food reservation app in Angular
• Learn Angular's Views, Controllers, Directives, and more!
• Use the community-built UI-Router routing module

Lesson 4 - Ember

• Build a food reservation app in Ember
• App generation and scaffolding with Ember-CLI
• Learn Ember's Templates, Services, Components, and more!