SlideShare une entreprise Scribd logo
1  sur  101
Télécharger pour lire hors ligne
ANGULARJS
ANGULARJS
AND BEYOND
WHO AM I?
ARI LERNER, FULLSTACK.IO
Author of and
Author of afew others (
,
)
Teacher at ,
Co-founder of ,
Background in distributed computingand infrastructure
ng-book (https://ng-book.com) ng-newsletter
(http://ng-newsletter.com)
D3 on Angular
(http://leanpub/d3angularjs) RidingRails with AngularJS
(https://leanpub.com/angularjs-rails)
HackReactor (http://hackreactor.com) General
Assembly(http://generalassemb.ly)
Fullstack.io (http://fullstack.io) FullstackEdu
(https://fullstackedu.com)
NG-BOOK.COM
FULLSTACKEDU
CORPORATE TRAINING
Allsized companies, large and small
1k+ totalparticipants
Refined for more than ayear
From DevOps to front-end
CORPORATE TRAINING
Contactus atus@fullstack.io
@auser
HACK REACTOR
Fantastic JavaScript-based course
Fantastic Angular curriculum
The harvard of programmingschools
AGENDA
1. HTML today
2. WhyAngular?
AGENDA
4. Community
5. Bestpractices
AGENDA
6. Town hall
HTML IS OLD
HTML IS OLD
OLDER THAN SOME OF US
<html>
<head>
<title>Reallybasichtml</title>
</head>
<body>
<h1id="headline">Helloworld</h1>
<spanclass="notice"></span>
<buttonid="buyBtn">Clickme</button>
</body>
</html>
STATIC MARKUP
WHAT ABOUT WRITING WEB APPLICATIONS?
WHAT ABOUT WRITING WEB APPLICATIONS?
Interactivity?
Immediate response
Desktop, powerful
HOW DO WE ADD INTERACTION TODAY?
varcontent=document.findElementById('headline'),
newDiv =document.createElement('div');
//Dosomeinterestingthingshere
//withournewdivelements
content.appendChild(newDiv);
OR
JQUERY
<divclass="notice"></div>
<buttonid="exampleBuyBtn">Clickme</button>
$("button#buyBtn").on('click',function(event){
$('div.notice').html('Youclickedthebutton');
});
Click me
IMPERATIVE WRAPPER AROUND DOM
MANIPULATION
NOT A WEB APPLICATION MAKER
When all you have is ahammer everything looks
like aDOM to manipulate
WHAT'S WRONG WITH THIS PICTURE?
WHAT'S WRONG WITH THIS PICTURE?
tightcoupling
structureless code base
low-levelinteraction
BUILDING ACCESS TO DOM, NOT WEB
APPLICATION CODE
HOW RUDIMENTARY
OKAY, THEN WHAT SHOULD WE DO?
WHAT IF WE REINVENTED HTML?
HTML IS DECLARATIVE
SHOULDN'T OUR INTERACTION BE AS WELL?
ENTER ANGULARJS
A MVW FRONT-END FRAMEWORK
A MVW FRONT-END FRAMEWORK
MODEL-VIEW-WHATEVER
SUPER FAST
IN DEVELOPMENT AND PRODUCTION
SPONSORED BY GOOGLE
AND IN PRODUCTION ALL-OVER-THE-INTERNET
AND MANY MORE
COST EFFICIENT
FOR DEVELOPMENT AND PRODUCTION
BUILT WITH TESTING IN MIND
BUILT WITH TESTING IN MIND
WITH FANTASTIC TOOLING
HIGHLY ACTIVE COMMUNITY
AND MANY OPEN-SOURCE COMPONENTS
COMPLETELY FREE
COMPLETELY FREE
SERIOUSLY, MIT LICENSED
BEST PRACTICES
WHY BEST PRACTICES?
Cruftycode
Productlongevity
Optimization
Extensibility
Shareability
Maintainability
...
TEST TEST TEST
NEVER PREPEND MODULES WITH NG
Don'twantto collide with ngpackages
NEVER PREPEND MODULES WITH NG
angular.module('ngApp',[])
//...
INSTEAD
angular.module('inApp',[])
//...
MODULARIZE YOUR CODE
angular.module('inApp',[
'in.login',
'in.typeahead',
//...
]);
MODULARIZE YOUR CODE
Write once
MODULARIZE YOUR CODE
Write once, useoften
USE BROWSERIFY
//login/index.js
module.exports=
angular.module('inApp.login',[])
//main.js
angular.module('inApp',[
require('./login').name
]);
USE BROWSERIFY
Module-based dependencies allow our app to be highly
extensible and force us to develop with modules
USE UIROUTER
module.exports=
angular.module('inApp.root',[
'ui.router'
]);
USE UIROUTER
module.exports=angular.module('inApp.root',['ui.router'])
.config(function($stateProvider){
$stateProvider
.state('root',{
abstract:true,
url:'/'
})
.state('root.home',{
url:'',
views:{
'@':{
templateUrl:'/scripts/root/home.html'
}
}
})
//...
USE UIROUTER
State-based routingis far more powerfulthan simple URL-based.
It's extensible and gives us far-greater flexibility.
OPTIMIZE LATE
<divclass='profile'ng-repeat='userinusers'>
<spanclass="name">{{user.name}}</span>
<spanclass="email">{{user.email}}</span>
</div>
OPTIMIZE LATE
Preoptimization stunts growth and over-complicates an existing
code.
OPTIMIZE LATE
We can always optimize to infinity
USE .PROVIDER()WHEN
POSSIBLE
Providers make iteasyto distribute module-based services
USE .PROVIDER()WHEN
POSSIBLE
module.exports=angular.module('inApp',['ui.router'])
.provider('User',function(){
varbackendUrl='http://default.url;
this.setBackendUrl=function(url){
backendUrl=url;
};
this.$get=function($http){
returnthis;
};
})
USE .PROVIDER()WHEN
POSSIBLE
angular.module('inApp',['ui.router'])
.config(function(UserProvider){
UserProvider.setBackendUrl('http://intuit.com/api/v1');
});
SEARCH FIRST, WRITE LAST
Chances are someone has written somethingto do the thingyou
are wantingto do. Search for it, then write it.
USE GULP/GRUNT
//...
gulp.task('jshint',function(){
returngulp.src(path.join(config.src.scriptDir,config.src.scriptF
iles))
.pipe($.jshint(config.src.jshint))
.pipe($.jshint.reporter(stylish));
});
//...
USE GULP/GRUNT
Usingabuild-system provides consistantlycorrect, production-
readycode.
PAIR PROGRAM
DON'T USE []NOTATION, USE A PRE-
MINIFIER
Save your fingers
DON'T USE []NOTATION, USE A PRE-
MINIFIER
.controller(['UserService',function(UserService){
}]);
DON'T USE []NOTATION, USE A PRE-
MINIFIER
.controller(function(UserService){
});
USE XSRF/CSRF TOKENS/COOKIES
Cross-Site RequestForgerytokens allow the backend to ensure
arequestcomingin matches apreviouslyknown request
USE XSRF/CSRF TOKENS/COOKIES
module.exports=angular.module('inApp.login',[])
.config(function($httpProvider){
$httpProvider.defaults.xsrfHeaderName='X-INT-XSRF';
$httpProvider.defaults.xsrfCookieName='int-xsrftoken';
$httpProvider.defaults.headers.common['X-Requested-With']='XMLHt
tpRequest';
});
TEST TEST TEST
Testingensures we know what's goingon with our app
TEST TEST TEST
Unittest(as much as possible)
E2E test(for CI servers, mostly)
TEST TEST TEST
Use zones.js(or Angular 2.0) for better stacktraces
COMMUNITY
COMMUNITY
Angular's power comes from the highly-engaged community
BOOKS
TUTORIALS
TRAINING
Contactus atus@fullstack.io
@auser
COMMUNITY PLUGINS
WHAT CAN WE DO TO CONTRIBUTE?
WHAT CAN WE IMPLEMENT FOR OURSELVES?
I18N
I18N
Use angular-translate
ASK ME ANYTHING
THANK YOU
NG-BOOK.COM
630+ page book with allthis information and much much more.
The onlyconstantlyupdatingbook available for Angular today.

Contenu connexe

Tendances

Tendances (20)

Developing a Demo Application with Angular 4 - J2I
Developing a Demo Application with Angular 4 - J2IDeveloping a Demo Application with Angular 4 - J2I
Developing a Demo Application with Angular 4 - J2I
 
Up & running with ECMAScript6
Up & running with ECMAScript6Up & running with ECMAScript6
Up & running with ECMAScript6
 
Top 7 Angular Best Practices to Organize Your Angular App
Top 7 Angular Best Practices to Organize Your Angular AppTop 7 Angular Best Practices to Organize Your Angular App
Top 7 Angular Best Practices to Organize Your Angular App
 
Angular Seminar-js
Angular Seminar-jsAngular Seminar-js
Angular Seminar-js
 
Data Flow Patterns in Angular 2 - Sebastian Müller
Data Flow Patterns in Angular 2 -  Sebastian MüllerData Flow Patterns in Angular 2 -  Sebastian Müller
Data Flow Patterns in Angular 2 - Sebastian Müller
 
AngularJS in practice
AngularJS in practiceAngularJS in practice
AngularJS in practice
 
Angular js 2
Angular js 2Angular js 2
Angular js 2
 
A gently introduction to AngularJS
A gently introduction to AngularJSA gently introduction to AngularJS
A gently introduction to AngularJS
 
AngularJS
AngularJSAngularJS
AngularJS
 
Angular 8
Angular 8 Angular 8
Angular 8
 
Angular components
Angular componentsAngular components
Angular components
 
Introduction to Angular js 2.0
Introduction to Angular js 2.0Introduction to Angular js 2.0
Introduction to Angular js 2.0
 
Introduction To Angular 4 - J2I
Introduction To Angular 4 - J2IIntroduction To Angular 4 - J2I
Introduction To Angular 4 - J2I
 
Angular 2 - Better or worse
Angular 2 - Better or worseAngular 2 - Better or worse
Angular 2 - Better or worse
 
AngularJS: Service, factory & provider
AngularJS: Service, factory & providerAngularJS: Service, factory & provider
AngularJS: Service, factory & provider
 
Angular js best practice
Angular js best practiceAngular js best practice
Angular js best practice
 
Angular 2 - The Next Framework
Angular 2 - The Next FrameworkAngular 2 - The Next Framework
Angular 2 - The Next Framework
 
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2
 
Gettings started with the superheroic JavaScript library AngularJS
Gettings started with the superheroic JavaScript library AngularJSGettings started with the superheroic JavaScript library AngularJS
Gettings started with the superheroic JavaScript library AngularJS
 
Angular Best Practices v2
Angular Best Practices v2Angular Best Practices v2
Angular Best Practices v2
 

Similaire à Beyond AngularJS: Best practices and more

Similaire à Beyond AngularJS: Best practices and more (20)

AngularJS 101
AngularJS 101AngularJS 101
AngularJS 101
 
Angular Mini Hackathon Code Talks 2019
Angular Mini Hackathon Code Talks 2019Angular Mini Hackathon Code Talks 2019
Angular Mini Hackathon Code Talks 2019
 
Modular Test-driven SPAs with Spring and AngularJS
Modular Test-driven SPAs with Spring and AngularJSModular Test-driven SPAs with Spring and AngularJS
Modular Test-driven SPAs with Spring and AngularJS
 
Angular js mobile jsday 2014 - Verona 14 may
Angular js mobile   jsday 2014 - Verona 14 mayAngular js mobile   jsday 2014 - Verona 14 may
Angular js mobile jsday 2014 - Verona 14 may
 
React django
React djangoReact django
React django
 
Mean stack Magics
Mean stack MagicsMean stack Magics
Mean stack Magics
 
Front End Development for Back End Java Developers - Jfokus 2020
Front End Development for Back End Java Developers - Jfokus 2020Front End Development for Back End Java Developers - Jfokus 2020
Front End Development for Back End Java Developers - Jfokus 2020
 
Front End Development for Back End Developers - vJUG24 2017
Front End Development for Back End Developers - vJUG24 2017Front End Development for Back End Developers - vJUG24 2017
Front End Development for Back End Developers - vJUG24 2017
 
Angularjs vs Dojo toolkit | SuperSpeaker@CodeCamp Iasi 2014
Angularjs vs Dojo toolkit | SuperSpeaker@CodeCamp Iasi 2014Angularjs vs Dojo toolkit | SuperSpeaker@CodeCamp Iasi 2014
Angularjs vs Dojo toolkit | SuperSpeaker@CodeCamp Iasi 2014
 
Vuejs for Angular developers
Vuejs for Angular developersVuejs for Angular developers
Vuejs for Angular developers
 
Angular - Beginner
Angular - BeginnerAngular - Beginner
Angular - Beginner
 
Web Development in Django
Web Development in DjangoWeb Development in Django
Web Development in Django
 
Angular.pptx
Angular.pptxAngular.pptx
Angular.pptx
 
Angular.pptx
Angular.pptxAngular.pptx
Angular.pptx
 
Angular.pptx
Angular.pptxAngular.pptx
Angular.pptx
 
ASP.NEt MVC and Angular What a couple
ASP.NEt MVC and Angular What a coupleASP.NEt MVC and Angular What a couple
ASP.NEt MVC and Angular What a couple
 
Voorhoede - Front-end architecture
Voorhoede - Front-end architectureVoorhoede - Front-end architecture
Voorhoede - Front-end architecture
 
ANGULAR JS LAB MANUAL(final) vtu2021 sch
ANGULAR JS LAB MANUAL(final) vtu2021 schANGULAR JS LAB MANUAL(final) vtu2021 sch
ANGULAR JS LAB MANUAL(final) vtu2021 sch
 
Go swagger tutorial how to create golang api documentation using go swagger (1)
Go swagger tutorial how to create golang api documentation using go swagger (1)Go swagger tutorial how to create golang api documentation using go swagger (1)
Go swagger tutorial how to create golang api documentation using go swagger (1)
 
Maciej Treder "Server-side rendering with Angular—be faster and more SEO, CDN...
Maciej Treder "Server-side rendering with Angular—be faster and more SEO, CDN...Maciej Treder "Server-side rendering with Angular—be faster and more SEO, CDN...
Maciej Treder "Server-side rendering with Angular—be faster and more SEO, CDN...
 

Dernier

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 

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)
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
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...
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
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
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot ModelNavi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
 
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
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 

Beyond AngularJS: Best practices and more