Upload
parasuet
View
6.312
Download
2
Tags:
Embed Size (px)
DESCRIPTION
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.
Citation preview
Building Paraşüt with Ember.js
A Financial Management App for Turkish SMEs
twitter.com/parasutcom
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
Invoices
Expenses
Inventory
Contacts
Tracking
Printing
Employees
Tracking
Import/ Export
Reports Mobile
Portal
Supplier/ Vendor
e-invoice
Expense report
Invites as viral channel
Invites as viral channel
Government
3rd Parties
Banks
API
Users (roles)
Accounting
Automation
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
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
Our Stack
+
But why Ember.js?
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:
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)
Ember.js Core Team
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
So what is Ember.js?
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
So we started developing with ember gem for rails!
Rails’s asset pipeline started to get clogged and
development became harder.
We needed a tool to manage our build process and serve the frontend during development.
Ember App Kit
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
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.
Testing• There’s QUnit, Ember Testing for writing tests
• Karma and Testem as test runners
• TDD in Javascript
• Also helpful for continuous integration
Compiling Assets
• Compiling and serving assets for development
• May be you want to use CoffeeScript, SCSS or LESS
• Optimizing assets for production
Linting JS
• Detecting errors during compilation
• Improving code quality
Package Management
• Using Bower for package management
• Version management for frontend dependencies
• CLI tool for adding and updating dependencies
RIP Ember App KitDeprecated in favor of Ember CLI
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
Generators
• Just like rails generators
• But for ember
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
Thanks!And we are hiring!
tinyurl.com/applyparasut
twitter.com/parasutcom