Dusan Stanojevic

What is EmberJS?

• Framework
• Ambitious Web Apps
• Single Page
• Components

Cool Parts

• ember-cli
• EmberJS
• Ember Data

Setup with ember-cli

Project structure with ember-cli

EmberJS

• Routing
• Templating
• Components
• GlimmerJS

Routing

• What are routes?
• How do they work?

Generating a route with ember-cli

Route

Code for app/routes/users.js that loads data 

Generated code for app/routes/users.js

Router

• Globally registers URLs to generated routes
• Allows for dynamic route parts

Code for /app/router.js

Templating - HTMLBars

• Why templating?
• Why HTMLBars?

Code example for /app/templates/users.hbs

Components

• What are they?
• How do they work?

Generating a component with ember-cli

Components

• Two way data binding
• Data down action up

Code for /app/templates/users.hbs

Code for /app/templates/components/user-show.hbs

Code for /app/components/user-show.js

GlimmerJS

• What is GlimmerJS?
• What is Virtual DOM?
• Avoiding diffing algorithms, static and
  dynamic optimizations?

React

Glimmer

Ember Data

• What is it?
• Elements of Ember Data
  • Models
  • Adapters
  • Serializers
  • Transformers

Ember Data example code 

Models

Generating a model with ember-cli

Code for /app/models/user.js
modified with name and email

Describe data

Adapters

Describe how to load data

Generating user adapter

Code for /app/adapters/user.js

Basic adapter methods

Serializers And Transformers

• Serializers how to serialize
  payloads of loaded/sent data
• Transformers how to
  transform data types to and
  from the server

More Cool Stuff

• Computed Properties
• Observers
• Dependency Injection
• Services
• Transitioning
• Actions

Q&A

Repositories for this presentation

https://github.com/dusanstanojeviccs/ember-demoapp-pre-ember-data

https://github.com/dusanstanojeviccs/ember-demoapp-post-ember-data

Thank You!