Presentation about different JavaScript MVC / MVVM frameworks.

1. JavaScript Frameworks
Pros and Cons!

2. The lineup
● AngularJs
● EmberJs
● Vue.js
● React.js

3. AngularJS

4. Intro
●Started by Brat Tech LLC (acquired by Google).
●Initial release: 2009
●Current stable release: 1.4.5

5. Philosophy
AngularJS is built on the belief that declarative programming should be used to create user interfaces and
connect software components, while imperative programming is better suited to defining an application's
business logic.
The framework adapts and extends traditional HTML to present dynamic content through two-way data-binding
that allows for the automatic synchronization of models and views. As a result, AngularJS de-emphasizes explicit
DOM manipulation with the goal of improving testability and performance.
AngularJS's design goals include:
● to decouple DOM manipulation from application logic. The difficulty of this is dramatically affected by the
way the code is structured.
● to decouple the client side of an application from the server side. This allows development work to
progress in parallel, and allows for reuse of both sides.
● to provide structure for the journey of building an application: from designing the UI, through writing the
business logic, to testing.
Angular implements the MVC pattern to separate presentation, data, and logic components. Using dependency
injection, Angular brings traditionally server-side services, such as view-dependent controllers, to client-side web
applications. Consequently, much of the burden on the server can be reduced.

6. Pros and Cons
Pros
● Development is relatively fast.
● You can do easy prototyping.
● Easy testability.
● Huge community.
Cons
● More a collection or libraries than a framework.
● Old architecture, much improved in v2.x.
● Scope system is easy but hard to debug.
● Limited documentation.
● Limited router (can be extend by 3rd party).
● Limited template system.
● Relatively slow.

7. EmberJS

8. Intro
●Started by Yehuda Katz and Tom Dale
●Initial release: 2011
●Current stable release: 2.0.2

9. Philosophy
From the beginning Ember was designed around several key ideas:
● Focus on ambitious web applications
○ Ember sets out to provide a wholesale solution to the client-side application problem. This is in
contrast to many Javascript frameworks that start by providing a solution to the V in MVC, and
attempt to grow from there.
● More productive out of the box
○ Ember is one component of a set of tools that work together to provide a complete development
stack. The aim of these tools is to make the developer productive immediately. For example Ember
CLI, provides a standard application structure and build pipeline. It also has a pluggable
architecture and over fourteen hundred addons to enhance and extend it.
● Stability without stagnation
○ This is the idea that backward compatibility is important and can be maintained while still
innovating and evolving the framework.
● Future web standards foresight
○ Ember has been an early adopter and pioneer of many standards around Javascript and the web
including promises, web components and ES6 syntax. Yehuda Katz, one of Ember's cofounders, is
a member on TC39, which is the committee responsible for future versions of the Javascript
language.
Like Ruby on Rails, Ember follows Convention over Configuration (CoC), and the Don't Repeat Yourself (DRY)
principle. It is a highly opinionated framework that provides good defaults and cultivates shared abstractions so
developers are free to focus on bigger and better ideas.ntly, much of the burden on the server can be reduced.

10. Pros and Cons
Pros
● Highly opinionated.
● Handlebars based template system.
● Easy testability.
● Huge community.
● Less “code”.
● “Real” framework.
● Backwards compatibility.
Cons
● Steep learning curve.
● Heavyweight.
● Complex.

11. Vue.js

12. Intro
●Started by Evan You
●Initial release: 2012
●Current stable release: 0.12.14

13. Philosophy
Vue.js is a library for building interactive web interfaces.
Technically, Vue.js is focused on the ViewModel layer of the MVVM pattern. It connects the View and the Model
via two way data bindings. Actual DOM manipulations and output formatting are abstracted away into Directives
and Filters.
Philosophically, the goal is to provide the benefits of reactive data binding and composable view components
with an API that is as simple as possible. It is not a full-blown framework - it is designed to be a view layer that is
simple and flexible. You can use it alone for rapid prototyping, or mix and match with other libraries for a custom
front-end stack. It’s also a natural fit for no-backend services such as Firebase.
Vue.js’ API is heavily influenced by AngularJS, KnockoutJS, Ractive.js and Rivets.js. Despite the similarities, I
believe Vue.js offers a valuable alternative to these existing libraries by finding a sweetspot between simplicity
and functionality.
Even if you are already familiar with some of these terms, it is recommended that you go through the following
concepts overview because your notion of these terms might be different from what they mean in the Vue.js
context.

14. Pros and Cons
Pros
● Easy to learn.
● Easy to read / understand source.
● Light / Fast.
Cons
● Will not work in “ancient” browsers.
● Suffers from abstraction leaks.
● Not a full framework.
● Quite young.

15. React.js

16. Intro
●Started by Jordan Walke (Instagram)
●Initial release: 2013
●Current stable release: 0.13.3

17. Pros and Cons
Pros
● Easy testability.
● Light / Fast.
● Easily combined with other libraries or replacing
parts of that library / framework.
Cons
● Learning curve.
● Rather verbose.
● Not a full framework.
● Quite young.

18. Questions?