SlideShare une entreprise Scribd logo
1  sur  16
Télécharger pour lire hors ligne
Switching to Angular.js
Silk way
About me
● Working as Front-end Lead Developer in GlobalLogic
● Used to develop Mobile Web Applications and HTML5
Games.
● Long time ago done Flex and ActionScript
● Contacts:
○ Skype: pavlo.yuriychuck
○ @pavlo_yuriychuk
○ Google+
Angular.js - PM point of view
● First release @ Oct 20, 2010, 0.9.0
● Contributors:
○ Miško Hevery - original author

●
●
●
●

○ Igor Minar
○ Vojta Jina
○ Matias Niemelä - Year of Moo blog
○ Pete Bacon Darwin
Reputation of vendor Google Closure && GWT
Docs: O’Reilly book, Packt publishing, Scripty book
Support: Google groups && Github issues
Ecosystem
Angular.js according to worried devs
●
●
●
●
●

Comments in official docs ;)
No more require.js ?
Learning curve with expanding amplitude
Where is my jQuery why jqLite ?
Global functions and callbacks in html ?
This presentation is not about
worrying ;)
Hierarchy of front-end problems solved by
frameworks and libraries
1. Cross browser - jQuery, Underscore, Twitter bootstrap
2. Applications
a. MV* - Backbone, Exos.JS, Knockout, Ember, Ext.JS,
Chaplin, Marionette, Can.JS, Thorax
b. Realtime - Meteor, Derby
c. Functional - Bacon.JS
3. Modularity and packaging - Require.JS || LMD, Bower,
Component.JS
4. Infrastructure - Angular.JS, Closure, DojoToolkit
Automation stack
●
●
●
●
●
●
●
●

Node version manager and Node.js
Grunt.js
Bower || Component
Docular || JSDoc
Karma.js drives Jasmine || Mocha + Chai + Sinon.js
LESS || SASS
Yeoman
Istanbul for code coverage
Implementation of domain aspects
● Switch from Inheritance to Dependency
Injection
● Decoupling of Model and Collection from
connection to the server side
● Directive as the only place to work with DOM
● No dedicated router class
Continuation
● Factories to store shared data
● Services to handle business logic
● Providers to store configurable shared data, i.e. i18n,
i10n, routes
● Directives to modify DOM and for small components
● Views for widgets
● Controllers to connect view and services
● Decorators to modify the behavior of existing services
Dos and Donts
● if ($scope.$$phase) $apply() / $digest()
everywhere - No
● DOM manipulation in controller - No
● $.Deferred and $.ajax instead of $http,
$resource, $q
● Minsafe [`$http`, function ($http) {}] - Yes
Dos and Donts
● Do not try to put custom method into $rootScope
● If you have data that is shared between elements that
are using ng-repeat and filters - split it over separate
arrays
● Whenever you see $scope.filterByXXX, $scope.
mapXXXtoYYY, $scope.getXXXbyYY it is high time to
use filters
● Do not put heavyweight operations into $watch and
$scope event heandlers
Switching to Angular.js
When not to switch:
1. Perhaps you need something simpler,
different paradigm, see the slide #6
2. Game development
3. High-performance data visualization and
rendering (VNC console, real-time video)
4. Lightweightness is critical
Readings
●
●
●
●
●

Before you start
Learning course
Recipies with Angular by Frederik Dietz
Comparison to other frameworks
The future of Angular.js by Brian Ford
A little bit of Angular ;)
// Insanity Warning: scope depth-first traversal
// yes, this code is a bit crazy, but it works and we have tests to prove it!

Contenu connexe

En vedette

En vedette (7)

Lime.JS
Lime.JSLime.JS
Lime.JS
 
Mobile Web Apps development essentials
Mobile Web Apps development essentialsMobile Web Apps development essentials
Mobile Web Apps development essentials
 
Jsfwdays 2013-2
Jsfwdays 2013-2Jsfwdays 2013-2
Jsfwdays 2013-2
 
Global logic tech talk switching to Angular.js
Global logic tech talk switching to Angular.jsGlobal logic tech talk switching to Angular.js
Global logic tech talk switching to Angular.js
 
Full stack development
Full stack developmentFull stack development
Full stack development
 
SVG in game development
SVG in game developmentSVG in game development
SVG in game development
 
Mobile web apps
Mobile web appsMobile web apps
Mobile web apps
 

Similaire à Switching to angular.js silk way

FITC presents: Mobile & offline data synchronization in Angular JS
FITC presents: Mobile & offline data synchronization in Angular JSFITC presents: Mobile & offline data synchronization in Angular JS
FITC presents: Mobile & offline data synchronization in Angular JSFITC
 
Plone Intranet under the hood
Plone Intranet under the hoodPlone Intranet under the hood
Plone Intranet under the hoodGuido Stevens
 
Architektura html, css i javascript - Jan Kraus
Architektura html, css i javascript - Jan KrausArchitektura html, css i javascript - Jan Kraus
Architektura html, css i javascript - Jan KrausWomen in Technology Poland
 
Using GIT for Everyone
Using GIT for EveryoneUsing GIT for Everyone
Using GIT for EveryoneGLC Networks
 
JavascriptMVC: Another choice of web framework
JavascriptMVC: Another choice of web frameworkJavascriptMVC: Another choice of web framework
JavascriptMVC: Another choice of web frameworkAlive Kuo
 
bongaus.fi - Spotting Service Powered by Django
bongaus.fi - Spotting Service Powered by Djangobongaus.fi - Spotting Service Powered by Django
bongaus.fi - Spotting Service Powered by DjangoJuho Vepsäläinen
 
Static Websites - The Final Frontier
Static Websites - The Final FrontierStatic Websites - The Final Frontier
Static Websites - The Final FrontierJuho Vepsäläinen
 
Griffon for the Enterprise
Griffon for the EnterpriseGriffon for the Enterprise
Griffon for the EnterpriseJames Williams
 
Front-End Developer's Career Roadmap
Front-End Developer's Career RoadmapFront-End Developer's Career Roadmap
Front-End Developer's Career RoadmapWebStackAcademy
 
In the DOM, no one will hear you scream
In the DOM, no one will hear you screamIn the DOM, no one will hear you scream
In the DOM, no one will hear you screamMario Heiderich
 
Introduction to serverless computing on Google Cloud
Introduction to serverless computing on Google CloudIntroduction to serverless computing on Google Cloud
Introduction to serverless computing on Google Cloudwesley chun
 
202107 - Orion introduction - COSCUP
202107 - Orion introduction - COSCUP202107 - Orion introduction - COSCUP
202107 - Orion introduction - COSCUPRonald Hsu
 
Run your code serverlessly on Google's open cloud
Run your code serverlessly on Google's open cloudRun your code serverlessly on Google's open cloud
Run your code serverlessly on Google's open cloudwesley chun
 
Web App Prototypes with Google App Engine
Web App Prototypes with Google App EngineWeb App Prototypes with Google App Engine
Web App Prototypes with Google App EngineVlad Filippov
 
Monitoring your VM's at Scale
Monitoring your VM's at ScaleMonitoring your VM's at Scale
Monitoring your VM's at ScaleKris Buytaert
 
Hong Kong Drupal User Group - 2014 March 8th
Hong Kong Drupal User Group - 2014 March 8thHong Kong Drupal User Group - 2014 March 8th
Hong Kong Drupal User Group - 2014 March 8thWong Hoi Sing Edison
 
2014 03-25 - GDG Nantes - Web Components avec Polymer
2014 03-25 - GDG Nantes - Web Components avec Polymer2014 03-25 - GDG Nantes - Web Components avec Polymer
2014 03-25 - GDG Nantes - Web Components avec PolymerHoracio Gonzalez
 

Similaire à Switching to angular.js silk way (20)

Dust.js
Dust.jsDust.js
Dust.js
 
FITC presents: Mobile & offline data synchronization in Angular JS
FITC presents: Mobile & offline data synchronization in Angular JSFITC presents: Mobile & offline data synchronization in Angular JS
FITC presents: Mobile & offline data synchronization in Angular JS
 
Plone Intranet under the hood
Plone Intranet under the hoodPlone Intranet under the hood
Plone Intranet under the hood
 
Architektura html, css i javascript - Jan Kraus
Architektura html, css i javascript - Jan KrausArchitektura html, css i javascript - Jan Kraus
Architektura html, css i javascript - Jan Kraus
 
Using GIT for Everyone
Using GIT for EveryoneUsing GIT for Everyone
Using GIT for Everyone
 
JavascriptMVC: Another choice of web framework
JavascriptMVC: Another choice of web frameworkJavascriptMVC: Another choice of web framework
JavascriptMVC: Another choice of web framework
 
bongaus.fi - Spotting Service Powered by Django
bongaus.fi - Spotting Service Powered by Djangobongaus.fi - Spotting Service Powered by Django
bongaus.fi - Spotting Service Powered by Django
 
Drupal Flyover, CMS Expo
Drupal Flyover, CMS ExpoDrupal Flyover, CMS Expo
Drupal Flyover, CMS Expo
 
Static Websites - The Final Frontier
Static Websites - The Final FrontierStatic Websites - The Final Frontier
Static Websites - The Final Frontier
 
Griffon for the Enterprise
Griffon for the EnterpriseGriffon for the Enterprise
Griffon for the Enterprise
 
Drools & jBPM Workshop London 2013
Drools & jBPM Workshop London 2013Drools & jBPM Workshop London 2013
Drools & jBPM Workshop London 2013
 
Front-End Developer's Career Roadmap
Front-End Developer's Career RoadmapFront-End Developer's Career Roadmap
Front-End Developer's Career Roadmap
 
In the DOM, no one will hear you scream
In the DOM, no one will hear you screamIn the DOM, no one will hear you scream
In the DOM, no one will hear you scream
 
Introduction to serverless computing on Google Cloud
Introduction to serverless computing on Google CloudIntroduction to serverless computing on Google Cloud
Introduction to serverless computing on Google Cloud
 
202107 - Orion introduction - COSCUP
202107 - Orion introduction - COSCUP202107 - Orion introduction - COSCUP
202107 - Orion introduction - COSCUP
 
Run your code serverlessly on Google's open cloud
Run your code serverlessly on Google's open cloudRun your code serverlessly on Google's open cloud
Run your code serverlessly on Google's open cloud
 
Web App Prototypes with Google App Engine
Web App Prototypes with Google App EngineWeb App Prototypes with Google App Engine
Web App Prototypes with Google App Engine
 
Monitoring your VM's at Scale
Monitoring your VM's at ScaleMonitoring your VM's at Scale
Monitoring your VM's at Scale
 
Hong Kong Drupal User Group - 2014 March 8th
Hong Kong Drupal User Group - 2014 March 8thHong Kong Drupal User Group - 2014 March 8th
Hong Kong Drupal User Group - 2014 March 8th
 
2014 03-25 - GDG Nantes - Web Components avec Polymer
2014 03-25 - GDG Nantes - Web Components avec Polymer2014 03-25 - GDG Nantes - Web Components avec Polymer
2014 03-25 - GDG Nantes - Web Components avec Polymer
 

Dernier

Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityPrincipled Technologies
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUK Journal
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?Antenna Manufacturer Coco
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024The Digital Insurer
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Servicegiselly40
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko
 
Evaluating the top large language models.pdf
Evaluating the top large language models.pdfEvaluating the top large language models.pdf
Evaluating the top large language models.pdfChristopherTHyatt
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 

Dernier (20)

Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
Evaluating the top large language models.pdf
Evaluating the top large language models.pdfEvaluating the top large language models.pdf
Evaluating the top large language models.pdf
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 

Switching to angular.js silk way

  • 2. About me ● Working as Front-end Lead Developer in GlobalLogic ● Used to develop Mobile Web Applications and HTML5 Games. ● Long time ago done Flex and ActionScript ● Contacts: ○ Skype: pavlo.yuriychuck ○ @pavlo_yuriychuk ○ Google+
  • 3. Angular.js - PM point of view ● First release @ Oct 20, 2010, 0.9.0 ● Contributors: ○ Miško Hevery - original author ● ● ● ● ○ Igor Minar ○ Vojta Jina ○ Matias Niemelä - Year of Moo blog ○ Pete Bacon Darwin Reputation of vendor Google Closure && GWT Docs: O’Reilly book, Packt publishing, Scripty book Support: Google groups && Github issues Ecosystem
  • 4. Angular.js according to worried devs ● ● ● ● ● Comments in official docs ;) No more require.js ? Learning curve with expanding amplitude Where is my jQuery why jqLite ? Global functions and callbacks in html ?
  • 5. This presentation is not about worrying ;)
  • 6. Hierarchy of front-end problems solved by frameworks and libraries 1. Cross browser - jQuery, Underscore, Twitter bootstrap 2. Applications a. MV* - Backbone, Exos.JS, Knockout, Ember, Ext.JS, Chaplin, Marionette, Can.JS, Thorax b. Realtime - Meteor, Derby c. Functional - Bacon.JS 3. Modularity and packaging - Require.JS || LMD, Bower, Component.JS 4. Infrastructure - Angular.JS, Closure, DojoToolkit
  • 7. Automation stack ● ● ● ● ● ● ● ● Node version manager and Node.js Grunt.js Bower || Component Docular || JSDoc Karma.js drives Jasmine || Mocha + Chai + Sinon.js LESS || SASS Yeoman Istanbul for code coverage
  • 8.
  • 9. Implementation of domain aspects ● Switch from Inheritance to Dependency Injection ● Decoupling of Model and Collection from connection to the server side ● Directive as the only place to work with DOM ● No dedicated router class
  • 10.
  • 11. Continuation ● Factories to store shared data ● Services to handle business logic ● Providers to store configurable shared data, i.e. i18n, i10n, routes ● Directives to modify DOM and for small components ● Views for widgets ● Controllers to connect view and services ● Decorators to modify the behavior of existing services
  • 12. Dos and Donts ● if ($scope.$$phase) $apply() / $digest() everywhere - No ● DOM manipulation in controller - No ● $.Deferred and $.ajax instead of $http, $resource, $q ● Minsafe [`$http`, function ($http) {}] - Yes
  • 13. Dos and Donts ● Do not try to put custom method into $rootScope ● If you have data that is shared between elements that are using ng-repeat and filters - split it over separate arrays ● Whenever you see $scope.filterByXXX, $scope. mapXXXtoYYY, $scope.getXXXbyYY it is high time to use filters ● Do not put heavyweight operations into $watch and $scope event heandlers
  • 14. Switching to Angular.js When not to switch: 1. Perhaps you need something simpler, different paradigm, see the slide #6 2. Game development 3. High-performance data visualization and rendering (VNC console, real-time video) 4. Lightweightness is critical
  • 15. Readings ● ● ● ● ● Before you start Learning course Recipies with Angular by Frederik Dietz Comparison to other frameworks The future of Angular.js by Brian Ford
  • 16. A little bit of Angular ;) // Insanity Warning: scope depth-first traversal // yes, this code is a bit crazy, but it works and we have tests to prove it!