Building web apps using Ember Js

Introduction to Ember JS - GDG Delhi

Transcript

1. Ember JS - Introduction to Frontend Web Frameworks
2. About me • Founder & CEO Panton Studios • Open source contributor • GSoC Alumnus with FOSSASIA
3. Why do we need Frameworks for Frontend? • Increase in productivity • Ease of development • Easier to maintain • Pre-built modules • Better tests • PWA support • You do not have to re-invent the wheel
4. What is Ember? • Javascript front-end framework • MVC based framework • Open source • Convention over configuration approach • Data Down Actions Up approach
6. How to get started? 1. Install npm 2. npm install ember-cli 3. Optional a. Phantom Js b. Watchman c. Bower
7. Core concepts of ember 1. Route 2. Model 3. Controllers 4. Components 5. Templates
8. Ember Framework
9. Routes & Controllers • Route a. Routes represent URLs of the application. b. Provides template for rendering. c. We can use add-on such as permissions to routers. • Controller a. They are the brain for the routers. b. Controls the flow in the route
10. Model • Represents persistent state • Interface between the server and application • Represents the entities of the system
11. Components • Templates control how a user interface looks, components control how the user interface behaves. • A template written in Handlebars, and a source file written in JavaScript • Each component has a template & a js file which contains the logic of the component
12. Create your first ember application $ ember new demo-app Boom you have just created your first ember app.
13. Understanding the directory structure • App ◦ Components ◦ Controllers ◦ Helpers ◦ Models ◦ Styles ◦ Routes ◦ Templates
14. Super powers of Ember • Computed properties • Observers • Testing • Bindings…...
15. Let’s dig into code Live demo $ ember serve
16. Thank you! Dilpreet @geekyd Twitter @geekydil Facebook @geekydil