SlideShare a Scribd company logo
Building maintainable web apps with Angular MS TechDays 2017
Building maintainable web apps with Angular MS TechDays 2017
Building maintainable web apps with Angular MS TechDays 2017
Building maintainable web apps with Angular MS TechDays 2017
Building maintainable web apps with Angular MS TechDays 2017
Building maintainable web apps with Angular MS TechDays 2017
Building maintainable web apps with Angular MS TechDays 2017
“The ratio of time spent reading versus
writing is well over 10 to 1.
We are constantly reading old code as part
of the effort to write new code”
Building maintainable web apps with Angular MS TechDays 2017
Building maintainable web apps with Angular MS TechDays 2017
Boy Scouts have a rule regarding
camping, that they should leave the
campground cleaner than
they found it. ... By ensuring that the
campground is cleaner when they
leave than it was when
they arrived.
Readability is king!
Use consistent naming through chain
(DB -> WebApi -> Angular)
Ubiquitious language (DDD) | Vocabulary
Naming guidance:
https://angular.io/guide/styleguide
Symbol name with suffix (.component.ts, .service.ts)
Functional naming (NavigationComponent,
LoggerService)
Do use PascalCasing when naming classes, interfaces
Do use camelCasing to name properties and methods
One Component per file
Do make locating code intuitive, simple and fast
Do create folders named for the feature area they
represent
Do extract templates and styles into a separate file,
when more than 3 lines
DEMO
Example naming/structuring in Angular
Building maintainable web apps with Angular MS TechDays 2017
A class should have just a single responsibility
Design for low coupling and high cohesion
Apply the single responsibility principle to all
components, services, and other classes
The number of functions on a class should be very
limited
The number of lines of each function should be
very limited
Building maintainable web apps with Angular MS TechDays 2017
Child 2
@OUTPUT
A component can send data to its parent by triggering an event the parent listens to
@INPUT
A component can receive data from its parent
Parent
Child 1
@OUTPUT
@INPUT
Child 2
Feature
component
Child 1
@OUTPUT
@INPUT
@INPUT
Presentation
component 2
Feature
component
Presentation
component 1
@OUTPUT
@INPUT
@INPUT
Consider feature/presentation
components
Consider using inheritance (DRY)
Consider shared components (DRY)
Rethink/Refactor your hierarchy when
needed
A class receives its dependencies from external
sources rather than creating them itself.
Create a loosely coupled system
Angular ships with its own dependency injection
framework
import { Injectable } from '@angular/core';
import { IFilter } from '../interfaces/IFilter';
@Injectable()
export class SessionstorageService {
public loadFilter(): IFilter {
. . .
return filter;
}
public saveFilter(filter: IFilter): void {
. . .
}
}
@Component()
export class FilterComponent {
constructor(private sessionStorageService: SessionStorageService)
}
@Pipe({name: 'processNameFilter'})
export class ProcessNameFilter implements PipeTransform {
transform(processes: Process[], args: any) : Process[] {
if (!args || !processes) {
return processes;
}
return processes.filter(p => p.name.toLowerCase().indexOf(args.toLowerCase()) > -1 ||
p.productgroup.toLowerCase().indexOf(args.toLowerCase()) > -1
);
}
}
<table id="withOrder"
class="table table-striped"
[mfData]="processes | processNameFilter:processSearchKey"
#mf="mfDataTable”>
Building maintainable web apps with Angular MS TechDays 2017
Support for multiple environments:
(Test, Acceptance, Production)
Supporting hotfixes and parallel development
Feature branches
Building maintainable web apps with Angular MS TechDays 2017
Building maintainable web apps with Angular MS TechDays 2017
Guards against changes that break existing code
(“regressions”).
Clarifies what the code does, it is a specification.
Reveals mistakes in design and implementation.
Isolated unit tests for pipes and services
Angular testing utillities for Components
Karma/Jasmine integration
https://angular.io/guide/testing
DEMO
Testing Angular with Karma/Jasmine
Be careful, mileage may vary
Can block your Angular upgrade path
Consider Angular Material UI
or
Commercial UI component library
"@angular/cli": "1.2.0",
"@angular/compiler-cli": "^4.0.0",
"@angular/language-service": "^4.0.0",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
Q & A

More Related Content

What's hot (20)

Java 8 concurrency abstractions
Java 8 concurrency abstractionsJava 8 concurrency abstractions
Java 8 concurrency abstractions
Nawazish Mohammad Khan
 
.NET Core, ASP.NET Core Course, Session 3
.NET Core, ASP.NET Core Course, Session 3.NET Core, ASP.NET Core Course, Session 3
.NET Core, ASP.NET Core Course, Session 3
Amin Mesbahi
 
Module 3: Introduction to LINQ (PowerPoint Slides)
Module 3: Introduction to LINQ (PowerPoint Slides)Module 3: Introduction to LINQ (PowerPoint Slides)
Module 3: Introduction to LINQ (PowerPoint Slides)
Mohamed Saleh
 
Building a chatbot – step by step
Building a chatbot – step by stepBuilding a chatbot – step by step
Building a chatbot – step by step
CodeOps Technologies LLP
 
ConsTRUCTION AND DESTRUCTION
ConsTRUCTION AND DESTRUCTIONConsTRUCTION AND DESTRUCTION
ConsTRUCTION AND DESTRUCTION
Shweta Shah
 
Iterator pattern
Iterator patternIterator pattern
Iterator pattern
anshu_atri
 
Jsp tag library
Jsp tag libraryJsp tag library
Jsp tag library
sandeep54552
 
Apache Flink - A Sneek Preview on Language Integrated Queries
Apache Flink - A Sneek Preview on Language Integrated QueriesApache Flink - A Sneek Preview on Language Integrated Queries
Apache Flink - A Sneek Preview on Language Integrated Queries
Fabian Hueske
 
Introduction to Scala
Introduction to ScalaIntroduction to Scala
Introduction to Scala
Synesso
 
Services Factory Provider Value Constant - AngularJS
Services Factory Provider Value Constant - AngularJSServices Factory Provider Value Constant - AngularJS
Services Factory Provider Value Constant - AngularJS
Sumanth krishna
 
Scope demystified - AngularJS
Scope demystified - AngularJSScope demystified - AngularJS
Scope demystified - AngularJS
Sumanth krishna
 
Inheritance1
Inheritance1Inheritance1
Inheritance1
Daman Toor
 
Linq
LinqLinq
Linq
samneang
 
Books
BooksBooks
Books
Steven Foster Murray
 
Introduction to Actor Model and Akka
Introduction to Actor Model and AkkaIntroduction to Actor Model and Akka
Introduction to Actor Model and Akka
Yung-Lin Ho
 
Java 8 - Features Overview
Java 8 - Features OverviewJava 8 - Features Overview
Java 8 - Features Overview
Sergii Stets
 
Class method object
Class method objectClass method object
Class method object
Minal Maniar
 
Xtext beyond the defaults - how to tackle performance problems
Xtext beyond the defaults -  how to tackle performance problemsXtext beyond the defaults -  how to tackle performance problems
Xtext beyond the defaults - how to tackle performance problems
Holger Schill
 
Ruby Interview Questions
Ruby Interview QuestionsRuby Interview Questions
Ruby Interview Questions
Sumanth krishna
 
LINQ/PLINQ
LINQ/PLINQLINQ/PLINQ
LINQ/PLINQ
melbournepatterns
 
.NET Core, ASP.NET Core Course, Session 3
.NET Core, ASP.NET Core Course, Session 3.NET Core, ASP.NET Core Course, Session 3
.NET Core, ASP.NET Core Course, Session 3
Amin Mesbahi
 
Module 3: Introduction to LINQ (PowerPoint Slides)
Module 3: Introduction to LINQ (PowerPoint Slides)Module 3: Introduction to LINQ (PowerPoint Slides)
Module 3: Introduction to LINQ (PowerPoint Slides)
Mohamed Saleh
 
ConsTRUCTION AND DESTRUCTION
ConsTRUCTION AND DESTRUCTIONConsTRUCTION AND DESTRUCTION
ConsTRUCTION AND DESTRUCTION
Shweta Shah
 
Iterator pattern
Iterator patternIterator pattern
Iterator pattern
anshu_atri
 
Apache Flink - A Sneek Preview on Language Integrated Queries
Apache Flink - A Sneek Preview on Language Integrated QueriesApache Flink - A Sneek Preview on Language Integrated Queries
Apache Flink - A Sneek Preview on Language Integrated Queries
Fabian Hueske
 
Introduction to Scala
Introduction to ScalaIntroduction to Scala
Introduction to Scala
Synesso
 
Services Factory Provider Value Constant - AngularJS
Services Factory Provider Value Constant - AngularJSServices Factory Provider Value Constant - AngularJS
Services Factory Provider Value Constant - AngularJS
Sumanth krishna
 
Scope demystified - AngularJS
Scope demystified - AngularJSScope demystified - AngularJS
Scope demystified - AngularJS
Sumanth krishna
 
Introduction to Actor Model and Akka
Introduction to Actor Model and AkkaIntroduction to Actor Model and Akka
Introduction to Actor Model and Akka
Yung-Lin Ho
 
Java 8 - Features Overview
Java 8 - Features OverviewJava 8 - Features Overview
Java 8 - Features Overview
Sergii Stets
 
Class method object
Class method objectClass method object
Class method object
Minal Maniar
 
Xtext beyond the defaults - how to tackle performance problems
Xtext beyond the defaults -  how to tackle performance problemsXtext beyond the defaults -  how to tackle performance problems
Xtext beyond the defaults - how to tackle performance problems
Holger Schill
 
Ruby Interview Questions
Ruby Interview QuestionsRuby Interview Questions
Ruby Interview Questions
Sumanth krishna
 

Similar to Building maintainable web apps with Angular MS TechDays 2017 (20)

Framework engineering JCO 2011
Framework engineering JCO 2011Framework engineering JCO 2011
Framework engineering JCO 2011
YoungSu Son
 
The Naked Bundle - Symfony Live London 2014
The Naked Bundle - Symfony Live London 2014The Naked Bundle - Symfony Live London 2014
The Naked Bundle - Symfony Live London 2014
Matthias Noback
 
The Naked Bundle - Symfony Usergroup Belgium
The Naked Bundle - Symfony Usergroup BelgiumThe Naked Bundle - Symfony Usergroup Belgium
The Naked Bundle - Symfony Usergroup Belgium
Matthias Noback
 
iPhone development from a Java perspective (Jazoon '09)
iPhone development from a Java perspective (Jazoon '09)iPhone development from a Java perspective (Jazoon '09)
iPhone development from a Java perspective (Jazoon '09)
Netcetera
 
Unit3 packages &amp; interfaces
Unit3 packages &amp; interfacesUnit3 packages &amp; interfaces
Unit3 packages &amp; interfaces
Kalai Selvi
 
Spring Basics
Spring BasicsSpring Basics
Spring Basics
ThirupathiReddy Vajjala
 
Polymorphism and interface in vb.net
Polymorphism and interface in vb.netPolymorphism and interface in vb.net
Polymorphism and interface in vb.net
KarthigaGunasekaran1
 
API workshop: Deep dive into Java
API workshop: Deep dive into JavaAPI workshop: Deep dive into Java
API workshop: Deep dive into Java
Tom Johnson
 
Unit3 part3-packages and interfaces
Unit3 part3-packages and interfacesUnit3 part3-packages and interfaces
Unit3 part3-packages and interfaces
DevaKumari Vijay
 
Whoops! Where did my architecture go?
Whoops! Where did my architecture go?Whoops! Where did my architecture go?
Whoops! Where did my architecture go?
Oliver Gierke
 
Clojure Fundamentals Course For Beginners
Clojure Fundamentals Course For Beginners Clojure Fundamentals Course For Beginners
Clojure Fundamentals Course For Beginners
Paddy Lock
 
The Naked Bundle - Symfony Barcelona
The Naked Bundle - Symfony BarcelonaThe Naked Bundle - Symfony Barcelona
The Naked Bundle - Symfony Barcelona
Matthias Noback
 
Lec 4 06_aug [compatibility mode]
Lec 4 06_aug [compatibility mode]Lec 4 06_aug [compatibility mode]
Lec 4 06_aug [compatibility mode]
Palak Sanghani
 
Design patterns
Design patternsDesign patterns
Design patterns
Anas Alpure
 
High Quality Symfony Bundles tutorial - Dutch PHP Conference 2014
High Quality Symfony Bundles tutorial - Dutch PHP Conference 2014High Quality Symfony Bundles tutorial - Dutch PHP Conference 2014
High Quality Symfony Bundles tutorial - Dutch PHP Conference 2014
Matthias Noback
 
Android coding guide lines
Android coding guide linesAndroid coding guide lines
Android coding guide lines
lokeshG38
 
Common ASP.NET Design Patterns - Telerik India DevCon 2013
Common ASP.NET Design Patterns - Telerik India DevCon 2013Common ASP.NET Design Patterns - Telerik India DevCon 2013
Common ASP.NET Design Patterns - Telerik India DevCon 2013
Steven Smith
 
C# Unit 2 notes
C# Unit 2 notesC# Unit 2 notes
C# Unit 2 notes
Sudarshan Dhondaley
 
Java se7 features
Java se7 featuresJava se7 features
Java se7 features
Kumaraswamy M
 
Design Pattern Mastery - Momentum Dev Con 19 Apr 2018
Design Pattern Mastery - Momentum Dev Con 19 Apr 2018Design Pattern Mastery - Momentum Dev Con 19 Apr 2018
Design Pattern Mastery - Momentum Dev Con 19 Apr 2018
Steven Smith
 
Framework engineering JCO 2011
Framework engineering JCO 2011Framework engineering JCO 2011
Framework engineering JCO 2011
YoungSu Son
 
The Naked Bundle - Symfony Live London 2014
The Naked Bundle - Symfony Live London 2014The Naked Bundle - Symfony Live London 2014
The Naked Bundle - Symfony Live London 2014
Matthias Noback
 
The Naked Bundle - Symfony Usergroup Belgium
The Naked Bundle - Symfony Usergroup BelgiumThe Naked Bundle - Symfony Usergroup Belgium
The Naked Bundle - Symfony Usergroup Belgium
Matthias Noback
 
iPhone development from a Java perspective (Jazoon '09)
iPhone development from a Java perspective (Jazoon '09)iPhone development from a Java perspective (Jazoon '09)
iPhone development from a Java perspective (Jazoon '09)
Netcetera
 
Unit3 packages &amp; interfaces
Unit3 packages &amp; interfacesUnit3 packages &amp; interfaces
Unit3 packages &amp; interfaces
Kalai Selvi
 
Polymorphism and interface in vb.net
Polymorphism and interface in vb.netPolymorphism and interface in vb.net
Polymorphism and interface in vb.net
KarthigaGunasekaran1
 
API workshop: Deep dive into Java
API workshop: Deep dive into JavaAPI workshop: Deep dive into Java
API workshop: Deep dive into Java
Tom Johnson
 
Unit3 part3-packages and interfaces
Unit3 part3-packages and interfacesUnit3 part3-packages and interfaces
Unit3 part3-packages and interfaces
DevaKumari Vijay
 
Whoops! Where did my architecture go?
Whoops! Where did my architecture go?Whoops! Where did my architecture go?
Whoops! Where did my architecture go?
Oliver Gierke
 
Clojure Fundamentals Course For Beginners
Clojure Fundamentals Course For Beginners Clojure Fundamentals Course For Beginners
Clojure Fundamentals Course For Beginners
Paddy Lock
 
The Naked Bundle - Symfony Barcelona
The Naked Bundle - Symfony BarcelonaThe Naked Bundle - Symfony Barcelona
The Naked Bundle - Symfony Barcelona
Matthias Noback
 
Lec 4 06_aug [compatibility mode]
Lec 4 06_aug [compatibility mode]Lec 4 06_aug [compatibility mode]
Lec 4 06_aug [compatibility mode]
Palak Sanghani
 
High Quality Symfony Bundles tutorial - Dutch PHP Conference 2014
High Quality Symfony Bundles tutorial - Dutch PHP Conference 2014High Quality Symfony Bundles tutorial - Dutch PHP Conference 2014
High Quality Symfony Bundles tutorial - Dutch PHP Conference 2014
Matthias Noback
 
Android coding guide lines
Android coding guide linesAndroid coding guide lines
Android coding guide lines
lokeshG38
 
Common ASP.NET Design Patterns - Telerik India DevCon 2013
Common ASP.NET Design Patterns - Telerik India DevCon 2013Common ASP.NET Design Patterns - Telerik India DevCon 2013
Common ASP.NET Design Patterns - Telerik India DevCon 2013
Steven Smith
 
Design Pattern Mastery - Momentum Dev Con 19 Apr 2018
Design Pattern Mastery - Momentum Dev Con 19 Apr 2018Design Pattern Mastery - Momentum Dev Con 19 Apr 2018
Design Pattern Mastery - Momentum Dev Con 19 Apr 2018
Steven Smith
 

Recently uploaded (20)

Secure Test Infrastructure: The Backbone of Trustworthy Software Development
Secure Test Infrastructure: The Backbone of Trustworthy Software DevelopmentSecure Test Infrastructure: The Backbone of Trustworthy Software Development
Secure Test Infrastructure: The Backbone of Trustworthy Software Development
Shubham Joshi
 
🌱 Green Grafana 🌱 Essentials_ Data, Visualizations and Plugins.pdf
🌱 Green Grafana 🌱 Essentials_ Data, Visualizations and Plugins.pdf🌱 Green Grafana 🌱 Essentials_ Data, Visualizations and Plugins.pdf
🌱 Green Grafana 🌱 Essentials_ Data, Visualizations and Plugins.pdf
Imma Valls Bernaus
 
Implementing promises with typescripts, step by step
Implementing promises with typescripts, step by stepImplementing promises with typescripts, step by step
Implementing promises with typescripts, step by step
Ran Wahle
 
Requirements in Engineering AI- Enabled Systems: Open Problems and Safe AI Sy...
Requirements in Engineering AI- Enabled Systems: Open Problems and Safe AI Sy...Requirements in Engineering AI- Enabled Systems: Open Problems and Safe AI Sy...
Requirements in Engineering AI- Enabled Systems: Open Problems and Safe AI Sy...
Lionel Briand
 
Microsoft Excel Core Points Training.pptx
Microsoft Excel Core Points Training.pptxMicrosoft Excel Core Points Training.pptx
Microsoft Excel Core Points Training.pptx
Mekonnen
 
Get & Download Wondershare Filmora Crack Latest [2025]
Get & Download Wondershare Filmora Crack Latest [2025]Get & Download Wondershare Filmora Crack Latest [2025]
Get & Download Wondershare Filmora Crack Latest [2025]
saniaaftab72555
 
Foundation Models for Time Series : A Survey
Foundation Models for Time Series : A SurveyFoundation Models for Time Series : A Survey
Foundation Models for Time Series : A Survey
jayanthkalyanam1
 
Cryptocurrency Exchange Script like Binance.pptx
Cryptocurrency Exchange Script like Binance.pptxCryptocurrency Exchange Script like Binance.pptx
Cryptocurrency Exchange Script like Binance.pptx
riyageorge2024
 
Automation Techniques in RPA - UiPath Certificate
Automation Techniques in RPA - UiPath CertificateAutomation Techniques in RPA - UiPath Certificate
Automation Techniques in RPA - UiPath Certificate
VICTOR MAESTRE RAMIREZ
 
LEARN SEO AND INCREASE YOUR KNOWLDGE IN SOFTWARE INDUSTRY
LEARN SEO AND INCREASE YOUR KNOWLDGE IN SOFTWARE INDUSTRYLEARN SEO AND INCREASE YOUR KNOWLDGE IN SOFTWARE INDUSTRY
LEARN SEO AND INCREASE YOUR KNOWLDGE IN SOFTWARE INDUSTRY
NidaFarooq10
 
Microsoft AI Nonprofit Use Cases and Live Demo_2025.04.30.pdf
Microsoft AI Nonprofit Use Cases and Live Demo_2025.04.30.pdfMicrosoft AI Nonprofit Use Cases and Live Demo_2025.04.30.pdf
Microsoft AI Nonprofit Use Cases and Live Demo_2025.04.30.pdf
TechSoup
 
TestMigrationsInPy: A Dataset of Test Migrations from Unittest to Pytest (MSR...
TestMigrationsInPy: A Dataset of Test Migrations from Unittest to Pytest (MSR...TestMigrationsInPy: A Dataset of Test Migrations from Unittest to Pytest (MSR...
TestMigrationsInPy: A Dataset of Test Migrations from Unittest to Pytest (MSR...
Andre Hora
 
Scaling GraphRAG: Efficient Knowledge Retrieval for Enterprise AI
Scaling GraphRAG:  Efficient Knowledge Retrieval for Enterprise AIScaling GraphRAG:  Efficient Knowledge Retrieval for Enterprise AI
Scaling GraphRAG: Efficient Knowledge Retrieval for Enterprise AI
danshalev
 
Full Cracked Resolume Arena Latest Version
Full Cracked Resolume Arena Latest VersionFull Cracked Resolume Arena Latest Version
Full Cracked Resolume Arena Latest Version
jonesmichealj2
 
DVDFab Crack FREE Download Latest Version 2025
DVDFab Crack FREE Download Latest Version 2025DVDFab Crack FREE Download Latest Version 2025
DVDFab Crack FREE Download Latest Version 2025
younisnoman75
 
Who Watches the Watchmen (SciFiDevCon 2025)
Who Watches the Watchmen (SciFiDevCon 2025)Who Watches the Watchmen (SciFiDevCon 2025)
Who Watches the Watchmen (SciFiDevCon 2025)
Allon Mureinik
 
FlakyFix: Using Large Language Models for Predicting Flaky Test Fix Categorie...
FlakyFix: Using Large Language Models for Predicting Flaky Test Fix Categorie...FlakyFix: Using Large Language Models for Predicting Flaky Test Fix Categorie...
FlakyFix: Using Large Language Models for Predicting Flaky Test Fix Categorie...
Lionel Briand
 
WinRAR Crack for Windows (100% Working 2025)
WinRAR Crack for Windows (100% Working 2025)WinRAR Crack for Windows (100% Working 2025)
WinRAR Crack for Windows (100% Working 2025)
sh607827
 
Societal challenges of AI: biases, multilinguism and sustainability
Societal challenges of AI: biases, multilinguism and sustainabilitySocietal challenges of AI: biases, multilinguism and sustainability
Societal challenges of AI: biases, multilinguism and sustainability
Jordi Cabot
 
Avast Premium Security Crack FREE Latest Version 2025
Avast Premium Security Crack FREE Latest Version 2025Avast Premium Security Crack FREE Latest Version 2025
Avast Premium Security Crack FREE Latest Version 2025
mu394968
 
Secure Test Infrastructure: The Backbone of Trustworthy Software Development
Secure Test Infrastructure: The Backbone of Trustworthy Software DevelopmentSecure Test Infrastructure: The Backbone of Trustworthy Software Development
Secure Test Infrastructure: The Backbone of Trustworthy Software Development
Shubham Joshi
 
🌱 Green Grafana 🌱 Essentials_ Data, Visualizations and Plugins.pdf
🌱 Green Grafana 🌱 Essentials_ Data, Visualizations and Plugins.pdf🌱 Green Grafana 🌱 Essentials_ Data, Visualizations and Plugins.pdf
🌱 Green Grafana 🌱 Essentials_ Data, Visualizations and Plugins.pdf
Imma Valls Bernaus
 
Implementing promises with typescripts, step by step
Implementing promises with typescripts, step by stepImplementing promises with typescripts, step by step
Implementing promises with typescripts, step by step
Ran Wahle
 
Requirements in Engineering AI- Enabled Systems: Open Problems and Safe AI Sy...
Requirements in Engineering AI- Enabled Systems: Open Problems and Safe AI Sy...Requirements in Engineering AI- Enabled Systems: Open Problems and Safe AI Sy...
Requirements in Engineering AI- Enabled Systems: Open Problems and Safe AI Sy...
Lionel Briand
 
Microsoft Excel Core Points Training.pptx
Microsoft Excel Core Points Training.pptxMicrosoft Excel Core Points Training.pptx
Microsoft Excel Core Points Training.pptx
Mekonnen
 
Get & Download Wondershare Filmora Crack Latest [2025]
Get & Download Wondershare Filmora Crack Latest [2025]Get & Download Wondershare Filmora Crack Latest [2025]
Get & Download Wondershare Filmora Crack Latest [2025]
saniaaftab72555
 
Foundation Models for Time Series : A Survey
Foundation Models for Time Series : A SurveyFoundation Models for Time Series : A Survey
Foundation Models for Time Series : A Survey
jayanthkalyanam1
 
Cryptocurrency Exchange Script like Binance.pptx
Cryptocurrency Exchange Script like Binance.pptxCryptocurrency Exchange Script like Binance.pptx
Cryptocurrency Exchange Script like Binance.pptx
riyageorge2024
 
Automation Techniques in RPA - UiPath Certificate
Automation Techniques in RPA - UiPath CertificateAutomation Techniques in RPA - UiPath Certificate
Automation Techniques in RPA - UiPath Certificate
VICTOR MAESTRE RAMIREZ
 
LEARN SEO AND INCREASE YOUR KNOWLDGE IN SOFTWARE INDUSTRY
LEARN SEO AND INCREASE YOUR KNOWLDGE IN SOFTWARE INDUSTRYLEARN SEO AND INCREASE YOUR KNOWLDGE IN SOFTWARE INDUSTRY
LEARN SEO AND INCREASE YOUR KNOWLDGE IN SOFTWARE INDUSTRY
NidaFarooq10
 
Microsoft AI Nonprofit Use Cases and Live Demo_2025.04.30.pdf
Microsoft AI Nonprofit Use Cases and Live Demo_2025.04.30.pdfMicrosoft AI Nonprofit Use Cases and Live Demo_2025.04.30.pdf
Microsoft AI Nonprofit Use Cases and Live Demo_2025.04.30.pdf
TechSoup
 
TestMigrationsInPy: A Dataset of Test Migrations from Unittest to Pytest (MSR...
TestMigrationsInPy: A Dataset of Test Migrations from Unittest to Pytest (MSR...TestMigrationsInPy: A Dataset of Test Migrations from Unittest to Pytest (MSR...
TestMigrationsInPy: A Dataset of Test Migrations from Unittest to Pytest (MSR...
Andre Hora
 
Scaling GraphRAG: Efficient Knowledge Retrieval for Enterprise AI
Scaling GraphRAG:  Efficient Knowledge Retrieval for Enterprise AIScaling GraphRAG:  Efficient Knowledge Retrieval for Enterprise AI
Scaling GraphRAG: Efficient Knowledge Retrieval for Enterprise AI
danshalev
 
Full Cracked Resolume Arena Latest Version
Full Cracked Resolume Arena Latest VersionFull Cracked Resolume Arena Latest Version
Full Cracked Resolume Arena Latest Version
jonesmichealj2
 
DVDFab Crack FREE Download Latest Version 2025
DVDFab Crack FREE Download Latest Version 2025DVDFab Crack FREE Download Latest Version 2025
DVDFab Crack FREE Download Latest Version 2025
younisnoman75
 
Who Watches the Watchmen (SciFiDevCon 2025)
Who Watches the Watchmen (SciFiDevCon 2025)Who Watches the Watchmen (SciFiDevCon 2025)
Who Watches the Watchmen (SciFiDevCon 2025)
Allon Mureinik
 
FlakyFix: Using Large Language Models for Predicting Flaky Test Fix Categorie...
FlakyFix: Using Large Language Models for Predicting Flaky Test Fix Categorie...FlakyFix: Using Large Language Models for Predicting Flaky Test Fix Categorie...
FlakyFix: Using Large Language Models for Predicting Flaky Test Fix Categorie...
Lionel Briand
 
WinRAR Crack for Windows (100% Working 2025)
WinRAR Crack for Windows (100% Working 2025)WinRAR Crack for Windows (100% Working 2025)
WinRAR Crack for Windows (100% Working 2025)
sh607827
 
Societal challenges of AI: biases, multilinguism and sustainability
Societal challenges of AI: biases, multilinguism and sustainabilitySocietal challenges of AI: biases, multilinguism and sustainability
Societal challenges of AI: biases, multilinguism and sustainability
Jordi Cabot
 
Avast Premium Security Crack FREE Latest Version 2025
Avast Premium Security Crack FREE Latest Version 2025Avast Premium Security Crack FREE Latest Version 2025
Avast Premium Security Crack FREE Latest Version 2025
mu394968
 

Building maintainable web apps with Angular MS TechDays 2017

  • 8. “The ratio of time spent reading versus writing is well over 10 to 1. We are constantly reading old code as part of the effort to write new code”
  • 11. Boy Scouts have a rule regarding camping, that they should leave the campground cleaner than they found it. ... By ensuring that the campground is cleaner when they leave than it was when they arrived.
  • 12. Readability is king! Use consistent naming through chain (DB -> WebApi -> Angular) Ubiquitious language (DDD) | Vocabulary Naming guidance: https://angular.io/guide/styleguide
  • 13. Symbol name with suffix (.component.ts, .service.ts) Functional naming (NavigationComponent, LoggerService) Do use PascalCasing when naming classes, interfaces Do use camelCasing to name properties and methods
  • 14. One Component per file Do make locating code intuitive, simple and fast Do create folders named for the feature area they represent Do extract templates and styles into a separate file, when more than 3 lines
  • 17. A class should have just a single responsibility Design for low coupling and high cohesion
  • 18. Apply the single responsibility principle to all components, services, and other classes The number of functions on a class should be very limited The number of lines of each function should be very limited
  • 20. Child 2 @OUTPUT A component can send data to its parent by triggering an event the parent listens to @INPUT A component can receive data from its parent Parent Child 1 @OUTPUT @INPUT
  • 23. Consider feature/presentation components Consider using inheritance (DRY) Consider shared components (DRY) Rethink/Refactor your hierarchy when needed
  • 24. A class receives its dependencies from external sources rather than creating them itself. Create a loosely coupled system Angular ships with its own dependency injection framework
  • 25. import { Injectable } from '@angular/core'; import { IFilter } from '../interfaces/IFilter'; @Injectable() export class SessionstorageService { public loadFilter(): IFilter { . . . return filter; } public saveFilter(filter: IFilter): void { . . . } } @Component() export class FilterComponent { constructor(private sessionStorageService: SessionStorageService) }
  • 26. @Pipe({name: 'processNameFilter'}) export class ProcessNameFilter implements PipeTransform { transform(processes: Process[], args: any) : Process[] { if (!args || !processes) { return processes; } return processes.filter(p => p.name.toLowerCase().indexOf(args.toLowerCase()) > -1 || p.productgroup.toLowerCase().indexOf(args.toLowerCase()) > -1 ); } } <table id="withOrder" class="table table-striped" [mfData]="processes | processNameFilter:processSearchKey" #mf="mfDataTable”>
  • 28. Support for multiple environments: (Test, Acceptance, Production) Supporting hotfixes and parallel development Feature branches
  • 31. Guards against changes that break existing code (“regressions”). Clarifies what the code does, it is a specification. Reveals mistakes in design and implementation.
  • 32. Isolated unit tests for pipes and services Angular testing utillities for Components Karma/Jasmine integration https://angular.io/guide/testing
  • 33. DEMO Testing Angular with Karma/Jasmine
  • 34. Be careful, mileage may vary Can block your Angular upgrade path Consider Angular Material UI or Commercial UI component library
  • 35. "@angular/cli": "1.2.0", "@angular/compiler-cli": "^4.0.0", "@angular/language-service": "^4.0.0", "@types/jasmine": "~2.5.53", "@types/jasminewd2": "~2.0.2",
  • 36. Q & A