Download as PDF, PPTX
Uploaded byJyaasa Technologies
Presentation on Ember.js
The document is a presentation on Ember.js, an open-source JavaScript framework based on the Model-View-Controller (MVC) pattern, designed for building scalable single-page web applications. It emphasizes productivity, stability, and convention over configuration, promising developers an efficient way to create ambitious web applications. The presentation also covers components like routers, templates, controllers, models, and the Ember Data library, which enhances data handling in Ember applications.
In this document
Powered by AI
Ember.js presentation by Jyaasa Technologies introducing Ember as a beautiful JavaScript framework.
Defines Ember as an open-source JavaScript MVC framework, enabling scalable single-page applications.
Highlights Ember's focus on ambitious web applications, productivity, stability, and the importance of URLs in web apps.
Shows how to set routes in Ember using Router.map to define app navigation paths.
Introduces Handlebars templates in Ember for creating HTML with dynamic linking.
Explains the role of controllers in defining interactivity in Ember applications.
Demonstrates view handling in Ember, showing how to conditionally render elements.
Details how to define models in Ember using DS.Model for attributes like name and address.
Emphasizes the usefulness of Ember CLI for automated tasks and enhancing productivity.
Discusses Ember Data's capabilities in handling server records, caching, and RESTful integration.
Summarizes key attributes of Ember: simplicity, productivity, maintainability, readability, and creativity.
Encourages effective use of Ember without reinventing tools, advocating for DIY development.
Provides closing remarks and invites questions, with contact information for further engagement.
More Related Content
Similar to Presentation on Ember.js
More from Jyaasa Technologies
Presentation on Ember.js
- 1. http://jyaasa.com Presentation on Ember.Js Copyright2015. Jyaasa Technologies. Ms. Prativa Devkota Mr. Shishir Sapkota
- 2. Ember-cli http://jyaasa.comCopyright 2015. JyaasaTechnologies.
- 3. You need nocli Immediate::reaction=>:what? Assert: “true” Ember-cli http://jyaasa.comCopyright 2015. Jyaasa Technologies.
- 4. Hi! It’s me Ember!! http://jyaasa.com Result isBeautiful Copyright 2015. Jyaasa Technologies.
- 5. http://jyaasa.com What is Ember? AJavaScript Framework Based on Model, View, Controller or MVC Pattern openSource::ofCourse! Copyright 2015. Jyaasa Technologies.
- 6. “ http://jyaasa.com Ember.js is anopen-source JavaScript application framework, based on the model-view-controller (MVC) pattern. It allows developers to create scalable single- page web applications by incorporating common idioms and best practices into the framework. - Wikipedia Copyright 2015. Jyaasa Technologies.
- 7. http://jyaasa.com Why Ember? Focus onambitious web applications Ember sets out to provide a wholesale solution to the client-side application problem More productiveout of the box type less achieve more Stability without stagnation backward compatibility The future is here Convention over Configuration Don't Repeat Yourself (DRY) Copyright 2015. Jyaasa Technologies.
- 8. http://jyaasa.com It all startswith… Well, with something If app doesnot have url, it’s not web app Let us start with url Copyright 2015. Jyaasa Technologies.
- 9. http://jyaasa.com Hello Router Router.map(function() { this.resource('posts',{path: '/'}); this.route('about'); this.resource('contact', function(){ this.resource('phone'); this.resource('email'); }); }); Copyright 2015. Jyaasa Technologies.
- 10. http://jyaasa.com Templates .handlebars or .hbs <divclass = "row"> <h1>Contacts</h1> <div class = 'col-sm-6'> <li> {{#link-to 'phone'}}Phone {{/link-to}} </li> <li> {{#link-to 'email'}}Email {{/link-to}} </li> </div> <div class = 'col-sm-6'> {{outlet}} </div> </div> Copyright 2015. Jyaasa Technologies.
- 11. Controllers http://jyaasa.comCopyright 2015. JyaasaTechnologies. It defines Interactivity export default Ember.Controller.extend({ displaying: false, // defines a property actions:{ showPhoto: function() { this.set('displaying', true) }, hidePhoto: function(){ this.set('displaying', false) } } });
- 12. View {{#if displaying}} <p> <button {{action'hidePhoto'}} class='btn btn-primary'> Hide Picture</button> </p> <p> <img src="http://www.nature.com/nature/journal/v489/n7416/images/489372b-f1.2.jpg"> </p> {{else}} <button {{action 'showPhoto'}} class= 'btn btn-primary'> Show Picture</button> {{/if}} http://jyaasa.comCopyright 2015. Jyaasa Technologies.
- 13. http://jyaasa.comCopyright 2015. JyaasaTechnologies. Model App.Blogger = DS.Model.extend({ name: DS.attr(„string’), gender: DS.attr(), address: DS.attr(), martial_status: DS.attr() });
- 14. http://jyaasa.comCopyright 2015. JyaasaTechnologies. Cli: „I am Back’ Hey, did you forget that cli? That suffix does all of the mundane work It is supposed to be your best friend It wants you to spend your time being productive Use it, and never look back!
- 15. emberdata A library thatintegrates tightly with Ember.js It makes it easy to retrieve records from a server, cache them for performance, save updates back to the server, and create new records on the client Without andy configuration, Ember Data can load and save records and their relationships served via a RESTfulJSON API, provided it follows certain conventions http://jyaasa.comCopyright 2015. Jyaasa Technologies.
- 16. http://jyaasa.comCopyright 2015. JyaasaTechnologies. Review Simplicity Productivity Maintainability Readability Creativity
- 17. http://jyaasa.comCopyright 2015. JyaasaTechnologies. Where to go now... Do not reinvent the wheelEmber.js Strong convention results:strong_convinction=>”DIY” DIY.Resolves :Do_IT_YOURSELF I see no limit to Sky
- 18. Tweet us @jyaasa oremail us web@jyaasa.com Questions? http://jyaasa.comCopyright 2015. Jyaasa Technologies. Thank You!!