It's one thing to prototype a quick web application. But what happens if you are part of a mature organization with dozens of applications, some with legacy code while others are grassroots projects being built up from ground up? In this talk you will hear about why Angular is the right choice for both situations and how the Clarity team helps support VMware applications teams as well as third party vendors and partners.

1. ANGULAR FOR
THE ENTERPRISE
How VMware scales modern web
development

2. JEEYUN LIM
UI Engineer @ VMware
Core Contributor to Clarity
ngGirls mentor
@jeeyunit
linkedin.com/in/jeeyun

4. A TRIP DOWN MEMORY LANE
1998 2018
20 employees 20,000 employees

5. A TRIP DOWN MEMORY LANE
C#
2003
VMware’s User Interface

6. A TRIP DOWN MEMORY LANE

7. A TRIP DOWN MEMORY LANE
C#
2003
VMware’s User Interface
Windows only
Flash
2012

8. A TRIP DOWN MEMORY LANE

9. A TRIP DOWN MEMORY LANE
C#
2003
Flash
2012
HTML5
2016
VMware’s User Interface
Windows only Slow
EOL

10. A TRIP DOWN MEMORY LANE

11. A TRIP DOWN MEMORY LANE
C#
2003
Flash
2012
HTML5
2016
VMware’s User Interface
Windows only Slow
EOL
👍

12. A CASE FOR ANGULAR
Opinionated
TypeScript as first-class citizen
Scaling UX & UI development
Leverage CLI for productivity

13. A CASE FOR ANGULAR
Opinionated
TypeScript as first-class citizen
Scaling UX & UI development
Leverage CLI for productivity

14. OPINION IS A GOOD THING
Build tools CLIRouter
HTTP Testing Animation

15. OPINION IS A GOOD THING
Standardized environment across development teams
Knowledge sharing
Finding help elsewhere is easier too
Spend mental energy and time on complex features

16. A CASE FOR ANGULAR
Opinionated
TypeScript as first-class citizen
Scaling UX & UI development
Leverage CLI for productivity

17. TYPESCRIPT AS A FIRST-CLASS CITIZEN
Syntactic sugar for JavaScript
Superset of ES2015:
Arrow functions
Promises
Spread Parameters
… and many more!
Gives us:
Static analysis
Symbol-based navigation
Code completion
Familiarity for backend engineers who are used to typed languages
TypeScript
ES2015
ES5
(JavaScript)

18. TYPESCRIPT AS A FIRST-CLASS CITIZEN
export class DatagridPropertyStringFilter<T = any> implements ClrDatagridStringFilterInterface<T>
{
private nestedProp: NestedProperty<T>;
constructor(public prop: string, public exact = false) {
this.nestedProp = new NestedProperty(prop);
}
accepts(item: T, search: string): boolean {
const propValue = this.nestedProp.getPropValue(item);
if (typeof propValue === 'undefined') {
return false;
} else if (this.exact) {
return ('' + propValue).toLowerCase() === search;
} else {
return ('' + propValue).toLowerCase().indexOf(search) >= 0;
}
}
}
datagrid-propperty-string-filter.ts

19. A CASE FOR ANGULAR
Opinionated
TypeScript as first-class citizen
Scaling UX & UI development
Leverage CLI for productivity

20. CLARITY DESIGN SYSTEM

21. DESIGN GUIDELINES FOR PLUGINS

22. DESIGN GUIDELINES FOR PLUGINS

23. A CASE FOR ANGULAR
Opinionated
TypeScript as first-class citizen
Scaling UX & UI development
Leverage CLI for productivity

24. ANGULAR CLI - STARTING A NEW PROJECT
$ ng new my-app
The CLI tools are really powerful and convenient. After
generating the project I have basically everything ready.
(tsconfig, lint, karma, protractor, environments etc.)
- VMware UI Engineer
“

25. ANGULAR SCHEMATICS
Developed by Angular CLI team
Custom scaffolding for the CLI
Transformation pipeline
Generate and modify code in filesystem
Potential changes are staged then committed

26. ANGULAR SCHEMATICS
File System
(Tree)
Actions
(Rules)
Commit

27. ANGULAR SCHEMATICS
$ ng add @angular/material
$ ng add @clr/angular
$ ng add @nativescript/schematics
$ ng add priming-schematics
…

28. ANGULAR SCHEMATICS AND UPDATES
$ ng update @clr/angular
UPDATE MESSAGES
Update Warn Info Error

29. <clr-dg-column-toggle>
<clr-dg-column-toggle-title clrType="ok">
好!
</clr-dg-column-toggle-title>
<clr-dg-column-toggle-button>全選!</…>
</clr-dg-column-toggle>
my.component.ts
WARNING: Clarity has removed the ok button (clrType="ok")
from the column hide/show panel in datagrid. Any custom
<clr-dg-column-toggle-button> component will now default
to clrType="selectAll" without needing the attribute.
Please remove any custom ok button in the column hide/
show panel, and also remove the clrType attributes for
buttons with clrType="selectAll" (src/app/account/
account.component.html) More info at https://
vmware.github.io/clarity/news/0.13.0-beta.2

30. ANGULAR FOR THE ENTERPRISE
Opinionated
TypeScript as first-class citizen
Scaling UX & UI development
Leverage CLI for productivity

31. THANK YOU
@jeeyunit
linkedin.com/in/jeeyun