Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?
About Me
• Microsoft MVP
• Tech Ed Speaker
• Asp.NET Insider
• Web API Advisor
• Pluralsight Author
• Dev Chair - Dev Connections
MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?
About Me
• Conference Organizer – MVPMIX.com
• Leader – Angularjs Meetup Austin
• Leader – Rockstar Developers Meetup
• Leader – iPhone Developers Meetup Dallas
• President – Chander Dhall, Inc.
• Chander Tech Podcast
MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?
Questions
• Do you really need a Single Page App?
• Which is the best framework for your
company?
• What’s a futuristic strategy for Javascript?
• How does my company qualify for FREE one-
hour consulting?
MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?
What JS frameworks do you use?
MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?
Demo
Javascript Fun
MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?
Demo
How NOT to write Javascript code
MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?
Demo Code
for
Angularjs
Angular
React
Aurelia
MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?
Size Matters
Library/Framework Size
React/Redux 147kb/***
Angular 1 159k/235k
Polymer 222k/302k
Aurelia 287k/352k
Ember 433k
Angular 2 636k/1023k
MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?
React• View Library
• React Core Doesn’t have– Dependency Injection
– Router
– Http
– Animation System
– Flux/Redux
MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?
Why Flux
MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?
Flux
MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?
Flux
MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?
Flux
MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?
Flux
MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?
Flux
MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?
Redux• Redux is a predictable state container for JavaScript apps.
• It helps you write applications that behave consistently, run
in different environments (client, server, and native), and
are easy to test.
• Great developer experience: Hot Reloading. Live code
editing combined with a time traveling debugger.
• Redux works with React, or with any other view library.
• It is tiny (2-3kB, including dependencies).
MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?
Size Matters
Library/Framework Size
React/Redux 147kb/***
Angular 1 159k/235k
Polymer 222k/302k
Aurelia 287k/352k
Ember 433k
Angular 2 636k/1023k
MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?
Angular 2
• 638kb
– Reactive Extensions
• 1023k
– Router, Http etc
MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?
Others
• Dynamic UI composition: Ability to render
based on a Plain Old Object into
dynamically composed component at run
time
• CSS based Animation System (Aurelia,
Angular)
MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?
Size Matters
Library/Framework Size
React/Redux 147kb/***
Angular 1 159k/235k
Polymer 222k/302k
Aurelia 287k/352k
Ember 433k
Angular 2 636k/1023k
MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?
DEMO: REPAINT PERFORMANCE
#devconnections
MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?
Repaint Performance
• http://martingust.github.io/aurelia-
dbmonster/
• http://jdanyow.github.io/aurelia-dbmonster/
• http://mathieuancelin.github.io/js-repaint-
perfs/
MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?
Repaint Performance
Library/Framework Paints/Second
Aurelia 90-107/172-186
Angular 2 90-100
Polymer 50-60
Angular 1 50-57
React 48-50
Ember *
MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?
DEMO: ANGULARJS (BAD
CODE SAMPLES)
#ChanderDhall.com
devconnections
MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?
Angular vs Angular 2
• Component Based
• Controllers Not used
• $scope Not used
MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?
Angular1
angular.module(‘example’)
.controller(‘ExampleCtrl’, function() {
});
MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?
Angular2import {Component, View} from 'angular2/angular2';
@Component({
selector: 'example'
})
@View({
templateUrl: './components/example/example.html'
})
export class Example {}
MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?
Angular 1
<input ng-model=”thing.item” type=”text”>
<button ng-click=”thing.submit(item)” type=”submit”>
MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?
Angular 2
Uses Input with Event Syntax
<input #item type=”text”>
<button (click)=”submit(item)” type=”submit”>
MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?
Angular 1
angular.module(‘example’)
.controller(‘ExampleCtrl’, function($scope) {
$scope.name = “John Smith”;
});
MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?
Angular 2@Component({
selector: 'example'
})
@View({
templateUrl: './components/example/example.html'
})
export class Example {
constructor() {
this.name = “John Smith”;
}
}
MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?
ANGULAR VS ANGULARJS
DEMO
#ChanderDhall.com
devconnections
MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?
Standards ComplianceLibrary/Framework Compliance Non-Compliance
Aurelia HTML, ES 2016, Web
Components
Polymer HTML, ES 2015, Web
Components
Ember HTML, ES 2015
Angular 2 ES 2016 (TS) NG2 Markup, Dart
Angular 1 HTML, ES5 Modules, DI
React ES 2015 JSX
Library/Framework Compliance Non-Compliance
MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?
Separation of ConcernsRating Frameworks/Libraries
Excellent Aurelia, Ember
Moderate Angular 1
Poor Angular 2, Polymer
N/A React
MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?
Ember: Separation of Concerns
• The router manages application state
• Models encapsulate the application’s data
• Controllers communicate between a model and a
template
• Templates define the html to render
• Views handle DOM interaction
MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?
ObtrusivenessRating Frameworks/Libraries
Obtrusive React, Angular 1,
Angular 2
Average Polymer, Ember
Unobtrusive Aurelia
MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?
InteroperabilityRating Frameworks/Libraries
Very Interoperable Aurelia, Ember
Average Angular 1, Polymer
High Friction Angular 2
MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?
CommunityGitHub Stars Contributors
Angular 50,577
Angular 2 13771 302
React 45,163 741
Ember 16,475 599
Aurelia 6,669 37
Polymer 15,426 84
Dated July 11, 2016
MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?
Corporate SupportRating Frameworks/Libraries
Committed Aurelia, Ember, Angular
Not Committed Angular 1, Polymer,
React
MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?
LicensingMIT BSD
Angular 1, Angular 2,
Aurelia, Ember
Polymer, React *
Both have patent
clause
MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?
Real Advice
(Not in the slide deck – Come see me ☺)
MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?
Recap
• Do you really need a Single Page App?
• Which is the best framework for your
company?
• What’s a futuristic strategy for Javascript?
• How does my company qualify for FREE
consulting?
Related Documents
