Javascript Framework Overview

© 2015 ConIT

Visualization

Our business revolves around data driven yet human comprehensible, rich UIs. The power of data is only as good as the understanding of numbers: and it is only possible through smart and understandable visuals. This is what we’re good at.

Welcome to a world where your users define and improve

your business every step of the way. Welcome to Big Data.

Each user brings a product interaction…

…every little piece of information gets collected…

…and stored and analyzed

And every properly analyzed insight…

…brings the product closer to where you want it.

© 2015 ConIT

Technology challenges

Pure Javascript can only get you so far. Unlike other modern interpreted languages, it is difficult to structure and split into abstract constructs like classes and objects. Most frameworks address that issue. However, which framework should we choose?

Our fundamental selection process: - The framework should provide non-trivial features - Should be either free or open-source (FOSS) - Should have a large community or should be backed by a reputable company

© 2015 ConIT

Our selected Javascript competitors

© 2015 ConIT

Several notable statistics on usage (2010-2015)

Google web search statistics:

69%

5%

25%

Javascript framework usage by number of sites

Ember.js

Backbone.js

React.js

Angular.js

Wappalyzer statistics:

0

2000

4000

6000

8000

10000

12000

Questions Answered % Issues open Issues closed Pull requestsopen

Pull requestsclosed

Ember.js

Angular.js

React.js

Backbone.js

Github / Stack Overflow statistics:

© 2015 ConIT

Functional advantages

Source: http://www.developereconomics.com/blog 0

200

400

600

800

1000

1200

1400

1600

Minified, GZIP Minified Uncompressed

Ember.js

Angular.js

React.js

Backbone.js

Key use cases: Performance comparison by measuring size:

© 2015 ConIT

Functional comparison

- Two way binding - Very low boilerplate - Performance focus - Templating engine / handlebars - Routing & data layer - Server rendering is a bit easier - pure JS - Ember API was changing a lot but is now stable - Docs and API seems a tad more friendly than angular in general

- Create custom DOM elements: e.g.<slider start=-5 end=5 /> - Two way binding - “Views do the UI, Controllers work out the logic behind the UI,

Services take care of communication with the backend and hold together pieces of common and related functionality, while Directives make it easy to create reusable components and extending HTML by defining new elements, attributes and behaviors.”

- Invents its own concepts sometimes: scopes, directives, transclusion

- Some concern with performance over many DOM elements - Angular 2.0 is coming out, but isn’t there yet, but will be the

future. And it will break API. How wise it to start an angular 1.x app today?

- Light & fast - 3rd party templating, usually underscore - No two way binding - Views manipulate DOM directly: makes code harder to test and

allows things to get tangled - Opinionated and barebone - sometimes a good thing but

doesn’t provide structure, many competing plugins / frameworks to choose from

- Just a glorified view layer: Has no routing - Uni-directional data flow: explicit updates. - Virtual DOM: Your changes get reflected to a virtual DOM. Then

you diff that with the actual DOM, and only update what changed. This makes updates faster.

- Probably will need to be used with flux: an architecture template that facebook made that includes a dispatcher.

- React router: http://github.com/rackt/react-router - Flux: https://scotch.io/tutorials/getting-to-know-flux-the-react-

js-architecture - JSX looks like templates mixed with code. You can use raw JS

but it's not idiomatic.

Source: https://gist.github.com/makmanalp/9b7f50aa16d21c2f9d37

© 2015 ConIT

Size of code comparison

Dynamic UI Binding (“Like” toggle button)

App = Ember.Application.create(); App.ApplicationController = Ember.Controller.extend({ actions:{ toggleLike:function(){ this.set('liked',!this.get('liked')); } } });

function LikeExample($scope) { $scope.like = false; $scope.toggleLike = function() { $scope.like = !$scope.like; }; }

var LikeButton = React.createClass({ getInitialState: function() { return {liked: false }; }, handleClick: function(event) { this.setState({ liked: !this.state.liked }); }, render: function() { var text = this.state.liked ? 'like' : 'haven\'t liked'; return ( <div> <p>You {text} this.</p> <button onClick={this.handleClick}>toggle</button> </div> ); } }); React.render( <LikeButton />, document.getElementById('example') );

Code Reuse / Reusable Components Ember.js: - widget-based approach called Ember Components - enables you to write your own ‘application-specific HTML

tags’ - only possible at View level, but not on Controller level Angular.js: - ability to create custom HTML tags - reusable components in Angular are called “directives” and

are more powerful than Ember - you may also make use of Angular’s extend or mixin system

like in Backbone.js and React Backbone.js and React: - very reliable, they use the mixin system for code reuse - use mixins at view or even controller level - your components are not forced to be UI-related and may

contain just utilities or even complex program logic

Source: http://www.developereconomics.com/blog

© 2015 ConIT

Other considerable factors

- The way: Convention over Configuration

- Signature projects:

- Quasy adequate developer toolchain: - Ember-rails - Ember-cli - EmberScript - Ember Inspector - Brunch, tapas-with-ember - Qunit, Jasmine

© 2015 ConIT

Technologies

To address complex challenges, we use advantages provided by the following platforms / languages:

© 2015 ConIT

Our Customers

We have the privilege of working with industry leaders to create and deliver essential solutions and products they need to thrive and succeed in a constantly changing world.

We deliver real impact and exceptional results. We can only be successful if our customers are.

© 2015 ConIT

Our Team

Milen has a degree in Information Technology and Industrial Management. His work experience includes a career in electronics and embedded systems design for the automobile industry, working as a senior software architect for Johnson Controls. Having real-world knowledge of the software industry, he is now overseeing the execution of our projects.

Milen Spasov CEO

Dimiter has a degree in Informatics and his work experience includes a successful career in computer networking and information security. He has worked for HP as an information security consultant, providing insight to the C level executives of customers like Alcatel Lucent, Nokia, AON, Centrica. Before joining, he was a Healthcare consultant for the likes of Philips, Pfizer and Thermo Fisher.

Dimiter Shalvardjiev CTO

© 2015 ConIT

Contact Us

http://conit-bg.com 00359 887 064 991 Dimiter Shalvardjiev 71 Lyuben Karavelov Street 1000 Sofia BULGARIA

http://conit-bg.de

0049 176 40039896 Alexander Chukovski

Boschetsrieder Straße 47

81379 München GERMANY