Ember.js tutorial for beginners #01 Introduction & Setup (2022)

Introduction to Ember.js

What is Ember.js?

• Shaun introduces Ember.js as a framework for ambitious web developers, emphasizing its productivity and reliability.

• Described as a battle-tested JavaScript framework, it provides all necessary tools to build modern web applications that function across devices.

Why Choose Ember.js?

• Notable companies using Ember include LinkedIn, Microsoft, Apple (especially Apple Music), and Netflix; knowledge of Ember is essential for front-end roles in these organizations.

• The framework is easy to learn and features a powerful CLI that simplifies project initiation and file creation with blueprints.

Key Features of Ember.js

• Offers an effective data management system for client-side organization and server communication.

• The tutorial will cover various aspects including routing systems, component creation, service injection, helper writing, data management with Ember Data, and testing practices.

Demo Overview

E-commerce Website Demo

• A quick demo showcases an e-commerce website featuring items on the homepage with images, titles, ratings, discounted prices, and a shopping cart.

• Clicking on an item leads to a detail page displaying descriptions and features; users can switch colors or add items to the cart.

Shopping Cart Functionality

• Users can view added items in the shopping cart along with subtotal calculations; they can adjust quantities or remove items easily.

Prerequisites for Learning Ember.js

Required Knowledge

• Basic understanding of HTML, CSS, JavaScript, and Node.js is recommended; proficiency in Node.js isn't mandatory but familiarity with npm (Node Package Manager) is essential.

Setting Up Environment

• Instructions provided for installing Node.js from nodejs.org; checking installation via terminal commands (node -v & npm -v).

Installing Ember CLI

Installation Steps

• Install Ember CLI globally using npm install -g ember-cli, allowing usage across different directories. Verify installation by running ember -v.

IDE Setup Recommendations

• Suggested use of Visual Studio Code as the IDE along with useful extensions like ember.js snippets and Handlebars code snippets.

Creating Your First Project

Project Structure Overview

• Create a directory for the tutorial project; running ember init generates application structure including app logic templates/styles in the app folder.

Configuration Files

• Explanation of various folders: config (configuration info), public (static files), test (testing files), vendor (third-party libraries).

Finalizing Project Setup

JSON Configuration File

• Adding jazz.config.json file indicates it's a JavaScript project; setting compiler options targeting ES2015 while excluding node modules.

Running the Application Locally

Getting Started with Ember.js and Styling

Customizing the Startup Page

• The speaker discusses modifying the startup page by changing default content to personalized messages using Handlebars (HBS), which is similar to HTML but includes additional features.

• To enhance the visual appeal of the application, Bootstrap and Font Awesome are integrated by copying their CDN links into index.html.

Applying Styles and Using SASS

• The speaker demonstrates how to change styles in the application, such as altering the body background color to red through CSS.

• An issue arises when attempting to use SASS instead of CSS; a solution involves installing Ember CLI SASS for compatibility.

Configuring Ember for SASS

• After installation, configuration settings in ember-cli-build.js are adjusted to specify that SASS will be used, including changing file extensions from .css to .scss.

• The project is then restarted, confirming that style changes are successfully applied.

Conclusion and Next Steps