A demo app to illustrate core and latest concepts in Ember.js

Overview

ember-workshop

A demo app to illustrate core and latest concepts in Ember.js

Setup

Installation
  1. Clone this repo.

    git clone [email protected]:ijlee2/ember-workshop.git
  2. Change directory.

    cd ember-workshop
  3. Use yarn to install dependencies.

    yarn install
Running demo app
  1. After following the installation step, you can run the app.

    ember serve
  2. Open the app at http://localhost:4200.

Linting
  1. When you write code, please check if it meets linter standards.

    yarn lint
  2. You can run yarn lint:fix to automatically fix CSS, HBS, and JS files.

Running tests
  1. When you write code, please check if all tests continue to pass.

    ember test --server
  2. You can add the flag --filter to run a subset of tests.

Syllabus

Each day (session) is designed to take around 4 hours, not counting breaks. There is an optional homework at the end of each day. The sessions are spread apart by a week or two.

Day 1

Learning outcomes:

  • Navigate the folder structure
  • Familiarize with the Ember CLI
  • Understand syntax for components
  • Design components that are accessible, extensible, and maintainable
  • A brief look at helper, modifier, and utility

Day 2

Learning outcomes:

  • Load data and respond to the user
  • Understand syntax for routes
  • Analyze tradeoff between a nested and sibling route
  • Inject a service to run A/B testing
  • A brief look at ember-concurrency

Day 3

Learning outcomes:

  • Understand syntax for tests
  • Recognize what to test in a unit, rendering, or application test
  • Develop best practices for writing tests
  • Create test helpers and custom assertions
  • A brief look at ember-a11y-testing, ember-cli-mirage, and sinon.js

Day 4 (in planning)

Learning outcomes:

  • Create an addon
  • Create an engine
  • Server-side render with FastBoot

Target Audience

I designed the app with 2 goals in mind:

  • Help onboard developers to Ember.js
  • Help existing users adopt newer patterns

Due to lack of time, I didn't write a step-by-step guide that would let you pursue self-learning. I hope to do so in the future.

For now, if you have a mentor role, please go over the commit history to decide what to cover in your onboarding.

Contributing

To provide feedback, you can reach out to me on Discord at ijlee2. Please star this project so that I can gauge its importance to you and the Ember community.

You might also like...

Official Semantic UI Integration for Ember

Semantic-UI-Ember This is the official Ember library for the Semantic-UI modules. Support The NodeJS and EmberJS versions respective tags are tested o

Oct 1, 2022

The ember implementation of UIkit

ember-uikit This addon is a wrapper for the CSS library UIkit which exposes certain components to give users an easy way for using UIkit in ember apps

Oct 20, 2022

Material Design Lite for Ember.js Apps

Material Design Lite for Ember.js Apps

ember-material-lite Google's Material Design Lite for Ember.js apps This addon requires ember = 1.11.0 Installation # ember-cli 0.2.3 ember install

Dec 17, 2021

Ember implementation of Google's Material Design

No longer maintained This project is no longer maintained. For an up-to-date material design project, please use Ember Paper. Ember-material-design Th

Mar 1, 2022

Bootstrap for Ember.js

Please use our CLI-ADDONS instead We rewrote almost all components from scratch and packed them as Ember-Addons, Please avoid using this project and u

Nov 17, 2022

Rich components for Ember.js framework.

Ember Components Ember Components is a comprehensive set of rich web components written purely in Ember.js that let you create an astonishing UI for a

Dec 18, 2020

Ember implementation of the game

Ember implementation of the game

Apr 27, 2022

Bugsnag integration for Ember applications.

Ember Bugsnag Bugsnag integration for Ember applications.

Apr 28, 2022

The user interface of the Restreamer for the connection to the Core application.

Restreamer-UI The user interface of the Restreamer for the connection to the Core application. React Material-UI (MUI) Development For the Restreamer

Dec 21, 2022
Ember.js addon allowing you to easily implement non-CRUD actions for your Ember Data models

@mainmatter/ember-api-actions This is an Ember.js addon allowing you to easily implement non-CRUD actions for your Ember Data models. Compatibility Em

Mainmatter 6 Dec 15, 2022
Demo site build in Umbraco v.9.0.0-beta004 and .NET Core 5.0

Umbraco v9 Demo Demo site build in Umbraco v.9.0.0-beta004 and .NET Core 5.0. About this solution: This is a demo site for Umbraco v9 build in the new

Dennis Adolfi 61 Dec 18, 2022
Airbnb-React - In this project, An Airbnb experience page clone is created to learn and implement React props concepts.

Create React Airbnb App In this project An airbnb experience page clone is created to learn and implement React props concepts. Objectives Learn about

Yogesh Gurjar 4 Jun 28, 2022
The CryptoVerse is a Cryptocurrency web application developed using Reactjs for providing the latest updates, value statistics, market cap, supply and news regarding the Cryptocurrency market.

CryptoVerse - A Crptocurrency Web Application Getting Started with Create React App This project was bootstrapped with Create React App. Available Scr

Eesha Srivastava 5 Oct 26, 2022
CoWIN Vaccination Tracker, Below is the PRODUCTION LINK this is updated at end of each day. To see any latest Updates, please check the documentation

CoWIN Vaccination Slots Checking App. CoWIN Vaccination Slots Checking App is a user-friendly website that allow users to find vaccine in nearby avail

Stephin Reji 31 Jan 28, 2022
Demonstration of how to use statecharts as and with actors in Ember.js

statechart-actors This app demonstrate how we can use ember-statecharts and XState's actor feature together. The demo-use case: Show a blog posts over

Michael Klein 3 Jan 9, 2022
Codemod to un-pod Ember apps, addons, and engines

ember-codemod-pod-to-octane Codemod to un-pod Ember apps, addons, and engines Usage Step 1. Quickly return to default Octane. cd <your/project/path> n

Isaac Lee 9 Nov 30, 2022
📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

Build bulletproof UI components faster Storybook is a development environment for UI components. It allows you to browse a component library, view the

Storybook 75.8k Jan 4, 2023
An accessible dropdown component for use in Ember apps.

ember-a11y-dropdown This is an accessible dropdown that you can use in your Ember app for a menu dropdown. I'm making it so people can stop using the

Melanie Sumner 2 Feb 10, 2022
An Ember CLI Addon that provides a variety of UI components.

We use https://waffle.io/softlayer/sl-ember-components to work our issues. What sl-ember-components is An Ember CLI Addon that provides UI components

SoftLayer 115 May 7, 2022