Building enterprise apps with Ember.js
•
7 likes•10,463 views
Parasut.com is a financial management SaaS for small businesses in Turkey. We use Ember.js to develop a beautiful, responsive, and incredibly powerful frontend. Ember.js also assists with our rapid development and deployment schedule. This presentation outlines our best practices with Ember.js.
Recommended
Recommended
More Related Content
Viewers also liked
Viewers also liked (12)
Recently uploaded
Recently uploaded (20)
Building enterprise apps with Ember.js
- 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 Invites as viral channel Reports Mobile Portal Supplier/ Vendor Email e-invoice Expense report Invites as viral channel Government 3rd Parties Banks API Users (roles) Accounting Automation
- 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 +
- 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)
- 14. Apps Powered by Ember.js Heroku’s new dashboard twitch.tv Travis CI Discourse Square dashboard Vine Apple’s help pages Skylight http://builtwithember.io/
- 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 harder.
- 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 quality
- 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
- 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