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

Email

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