Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Ember.js Framework

4cf764dcd5d1efc1de7051603bdf8215?s=47 JSIST
September 27, 2014

Ember.js Framework

JSIST 2014
By : Sean Yu



September 27, 2014


  1. Building Paraşüt with Ember.js A Financial Management App for Turkish

    SMEs twitter.com/parasutcom
  2. Modern SaaS for Turkey • Turkish small businesses need innovation

    & information • 3mm SMEs (99% of market) with no access to easy, affordable finance management software • Must create intuitive, beautiful, fun yet sophisticated, enterprise-ready application • Must do so in “lean startup” way
  3. Invoices Expenses Inventory Contacts Tracking Printing Employees Tracking Import/ Export

    Reports Mobile Portal Supplier/ Vendor Email e-invoice Expense report Invites as viral channel Invites as viral channel Government 3rd Parties Banks API Users (roles) Accounting Automation
  4. None
  5. None
  6. None
  7. Andaç Türkmen ! CTO Co-Founder Fahri Özkaramanlı ! Designer Co-Founder

    Barış Gümüştaş ! Full Stack Dev. Oytun Yücel ! Full Stack Dev. Tuğcem Yalçın ! Full Stack Dev. Daniel Swakman ! Designer Our Team
  8. Technical Challenges • Providing a great and smooth user experience

    • Almost native feeling • Has a complex functionality • Constant development of new features • Tweaking features according to customer needs
  9. Our Stack +

  10. But why Ember.js?

  11. The process • We were trying to choose between Angular,

    Backbone and Ember.js • It was beginning of spring ’13 • Backbone had a huge community but it would need too much work on our side • Angular and Ember.js were both new at the time and they were almost the same size when it comes to community and adoption • At the end we chose Ember.js because:
  12. Ember.js Philosophy • Built with similar logic to backend frameworks

    so it’s quite familiar • Convention over configuration • Good documentation • Provides the tools for abstraction & decoupling • Provides a great support library (stuff like enumerables and utility methods, similar to ActiveSupport if you are a ruby dev) • Optimized for developer happiness (Yehuda Katz’s own words)
  13. Ember.js Core Team

  14. Apps Powered by Ember.js http://builtwithember.io/ Heroku’s new dashboard twitch.tv Travis

    CI Discourse Square dashboard Vine Apple’s help pages Skylight
  15. So what is Ember.js?

  16. Ember.js • Model-view-controller (MVC) architectural pattern • Not exactly like

    the server-side MVC • Based on SproutCore which is similar to Cocoa • A Rich Object Model • Utilities gathering best practices and common idioms • Data Binding
  17. So we started developing with ember gem for rails!

  18. Rails’s asset pipeline started to get clogged and development became

  19. We needed a tool to manage our build process and

    serve the frontend during development.
  20. Ember App Kit

  21. What is Ember App Kit • Developed by Ember.js core

    team member Stefan Penner • Provides a project structure • Package management via Bower • Grunt based workflow • Transpiles ES6 Modules • LESS,SASS,Stylus and CoffeeScript support • JS Linting via JSHint • Anything else you need through Grunt tasks • Testing https://github.com/stefanpenner/ember-app-kit
  22. ES6 modules • Simple way of managing dependencies by using

    ‘import’ and ‘export’ • Named exports • You can use name resolving for loading dependencies. • We are transpiling ES6 modules to require.js until the standard is matured enough and natively supported by browsers.
  23. Testing • There’s QUnit, Ember Testing for writing tests •

    Karma and Testem as test runners • TDD in Javascript • Also helpful for continuous integration
  24. Compiling Assets • Compiling and serving assets for development •

    May be you want to use CoffeeScript, SCSS or LESS • Optimizing assets for production
  25. Linting JS • Detecting errors during compilation • Improving code

  26. Package Management • Using Bower for package management • Version

    management for frontend dependencies • CLI tool for adding and updating dependencies
  27. RIP Ember App Kit Deprecated in favor of Ember CLI

  28. None
  29. Ember CLI • Not production ready yet but getting closer!

    • Everything provided by Ember App Kit • Generators • New asset pipeline based on broccoli • Faster asset compilation! • Better organization through more “convention over configuration” • Will become a part of Ember.js when it gets ready for production http://www.ember-cli.com
  30. Generators • Just like rails generators • But for ember

  31. Broccoli • Browser compilation library – a build tool for

    applications that run in the browser • Similar to Gulp but focused on asset compilation • Still beta but getting close • Like grunt but for specifically for compiling assets for browsers https://github.com/joliss/broccoli
  32. Thanks! And we are hiring! tinyurl.com/applyparasut twitter.com/parasutcom