Angular: Komponentenbasierte HTML5-Anwendungen für alle

Angular
Komponentenbasierte HTML5-Anwendungen
Manuel Rauber
@manuelrauber
Consultant

View Slide

Special Day “Modern Business Applications”
BASTA! 2017
Angular: Komponentenbasierte HTML5-Anwendungen für alle

View Slide

Consultant @ Thinktecture AG
! [email protected]
" @manuelrauber
# https://manuel-rauber.com
Microsoft MVP
The guy who’s talkin’
BASTA! 2017
Manuel Rauber

View Slide

Cross-Platform
Angular
Cordova
Electron
Deployment
BASTA! 2017
Talking Points

View Slide

Gotta catch’em all!
BASTA! 2017
Cross-Platform

View Slide

BASTA! 2017
Single- vs. Multi- vs. Cross-Platform
macOS
Linux
Windows iOS
Windows Phone
Android
BlackBerry 10
FireOS
Browser
TV
…
Refrigerator

View Slide

BASTA! 2017

View Slide

BASTA! 2017
The web as a platform

View Slide

BASTA! 2017
But it doesn’t look like a
native application!
Exactly.

View Slide

BASTA! 2017
https://spotifyblogcom.files.wordpress.com/2014/12/overview.png

View Slide

BASTA! 2017
http://media.idownloadblog.com/wp-content/uploads/2014/06/Google-Docs-Sheets-Slides-teaser-001.jpg

View Slide

BASTA! 2017
Powered by

View Slide

• Lightweight service-based architecture
• Functional services with dedicated interfaces
• Use other services, like database or file system
• (JSON-based) Web APIs
• Secured by tokens
• Consumable by every HTTPS speaking client
• Application push services via WebSocket
• SignalR
• Socket.io
BASTA! 2017
Architecture
HTTP HTTPS WebSocket
Service A Service B Service C
Web APIs
(ASP.NET, Node.js, …)
HTML5-Application
(Single-Page Application)
Web Cordova Electron

View Slide

Single-Page Applications
BASTA! 2017
Angular

View Slide

• Designed by Andres Hejlsberg, who also designed C#
• Typed superset of JavaScript that transpiles to plain JavaScript
• Types are optional, but useful metadata for tooling
• Static Code Analysis
• Refactoring
• Linting
• IntelliSense
BASTA! 2017
TypeScript

View Slide

• Angular 2, 4, 5?! Just Angular! Semantic versioning, just like Google Chrome
• Angular Universal: Client- and server-side-rendering possibilities
• MV* architecture
• Components, Views, View Models
• Modules, Services, Dependency Injection
• Data binding, Routing, HTTP, Animations, Unit-testable
• First class IDE support
• JetBrains WebStorm
• Visual Studio Code
• Build tooling via Angular CLI
BASTA! 2017
Angular Overview

View Slide

Classes with metadata and a view-defining template.
BASTA! 2017
Components, Components, Components, …
@Component({
selector: 'hackathon-form',
templateUrl: 'hackathonForm.html'
})
export class HackathonFormComponent {
@Input()
public hackathon: HackathonModel;
@Output()
public onSubmitted: EventEmitter;
}
…
[hackathon]="currentHackathon"
(onSubmitted)="saveHackathon($event)"
>
…

View Slide

BASTA! 2017
Data flow
Parent -> Child
Application
Hackathons
Users
Hackathon Hackathon
[hackathons]=“someExp”
[hackathon]=“someExp”
Child-> Parent
Application
Hackathons
Users
Hackathon Hackathon
(rate)=“onRate()”
(rate)=“onRate()”
via @Input() via @Output()

View Slide

• Change Detection is done “automagically” via a library named zone.js
• Overwrites all asynchronous browser APIs with an own implementation
• Implementation used to trigger an Angular change detection cycle
• Asynchronous APIs like
• Events: clicks, mouse movement, input, submit, …
• XMLHttpRequest, fetch
• setTimeout, setInterval
BASTA! 2017
Change Detection

View Slide

Directives are used to attach behavior to elements.
BASTA! 2017
Directives
@Directive({
selector: '[non-empty]',
host: {
'[class.non-empty]': 'nonEmpty'
}
})
export class NonEmptyDirective {
public nonEmpty: boolean;
constructor(@Host() ngModel: NgModel) {
ngModel.valueChanges.subscribe(change => this.nonEmpty = !!change);
}
}

View Slide

Services are classes with metadata but without a view. Services are normally
singletons but can be constructed on demand.
BASTA! 2017
Services
@Injectable()
export class HackathonService {
constructor(private _http: HttpClient) {
}
public getHackathons(): Observable {
return ...;
}
}

View Slide

Angular has an hierarchical constructor dependency injection system. All types are
registered explicitly. Either globally (for singleton registrations) or on a component
level (every component gets their own instance).
BASTA! 2017
Dependency Injection
@Injectable()
constructor(private _http: HttpClient) {
}
}

View Slide

Pipes are used to transform displayed values within a template.
BASTA! 2017
Pipes
@Pipe({
name: 'date'
})
export class DatePipe implements PipeTransform {
public transform(value: Date, format?: string): string {
if (!value) {
return 'n/a';
}
return Moment(value).format(format);
}
}
{{ model.date | date }}

View Slide

Angular offers a unit-test-mockable HTTP service based on observables.
Observables are built on top of RxJS and represent “an API for asynchronous
programming with observable streams”.
BASTA! 2017
HTTP & Observables
@Injectable()
constructor(private _http: HttpClient, private _url: UrlService) {
}
public getHackathons(): Observable {
return this._http.get(this._url.getEndpoint('hackathons'));
}
}

View Slide

Angular’s routing system interprets a browser URL to navigate to a
view/component. It supports features like child routing or loading compete
modules asynchronously.
BASTA! 2017
Routing
export class CreateHackathonComponent {
constructor(private _router: Router) {
}
public saveHackathon() {
// Save the model...
this._router.navigate(['/dashboard’]);
}
}
const appRoutes: Routes = [{
path: 'dashboard',
component: DashboardComponent
}];
const AppRoutes = RouterModule
.forRoot(appRoutes, {
useHash: true
});

View Slide

Angular uses modules to organize an application into related blocks of
functionality. A decorator is used to define a module.
BASTA! 2017
Modules
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ],
providers: [ HackathonService ]
})
export class AppModule {
}

View Slide

Angular can either be bootstrapped with Just-In-Time compilation or by using
Ahead-Of-Time compilation.
BASTA! 2017
Bootstrap
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './appModule';
platformBrowserDynamic().bootstrapModule(AppModule);

View Slide

Native mobile applications
BASTA! 2017
Cordova

View Slide

• Native application shell with integrated web browser
• Android: Android specific browser / CrossWalk
• iOS: UIWebView / WKWebView
• Windows Mobile: Internet Explorer / Edge
• HTML5 app is hosted within an integrated web browser
• Provides access to the underlying native platforms via plugins
• Native SDKs to build the apps are needed
BASTA! 2017
Cordova

View Slide

Native desktop applications
BASTA! 2017
Electron

View Slide

• Allows creation of real desktop application (.exe, .app)
• Combines a full-blown Chromium browser with Node.js
• Does not rely on the target machine’s installed browsers
• No need to install native SDKs for building
• Access native platform APIs
• Electron API
• Node.js modules
• Advanced features like auto updates & crash reporter
BASTA! 2017
Electron

View Slide

BASTA! 2017
BASTA! Spring 2017
macOS
iOS
Windows Mobile
Android
Windows Desktop
Windows 10/UWP
Linux
Browser

View Slide

“To be on cloud nine”
BASTA! 2017
Deployment

View Slide

• Dockerize it!
• Deployable via Docker containers on
• Microsoft Azure: Container Registry, Container Services, Container
Instances
• IBM Bluemix Container Services
• Amazon EC2 Container Services
• Google Cloud Platform
• Runnable via
• Simple Azure Linux-based Web Apps
• Docker Swarm
• Kubernetes
BASTA! 2017
Deployment

View Slide

A glance across the border
BASTA! 2017
Progressive Web Apps

View Slide

• Basic idea: Remove the App Stores!
• Bring native experience directly to the browser
• Platform push services
• Offline
• Installable
• Initiate led by Google since 2015
• PWA is not a technology but a collection of features
• Backwards compatible
BASTA! 2017
Overview

View Slide

• Modern applications need a modern architecture
• Web Technology Stack to achieve “real cross-platform”
• Cordova & Electron for native platform integrations
• Build tooling supports daily development and production workflow
• Progressive Web Apps show an interesting future
BASTA! 2017
Summary

View Slide

“Cross-Plattform HTML5 Day”, Thursday, September, 28th
Anfassen erlaubt: Mobile Apps mit Angular & Cordova
Thomas Hilzendegen – 9 am, Gutenberg-Saal 4
Fenster überall: Desktop-Anwendungen mit Angular & Electron
Fabian Gosebrink – 10:45 am, Gutenberg-Saal 4
Web goes native: Progressive Web Apps (PWA) – with Angular
Shmuela Jacobs – 5 pm, Gutenberg-Saal 4
BASTA! 2017
Sessions

View Slide

BASTA! 2017
https://entwickler.de/press/shortcuts/cross-plattform-579811835.html

View Slide

• Angular: https://angular.io
• Apache Cordova: https://cordova.apache.org/
• Electron: http://electron.atom.io/
• Gulp: http://gulpjs.com/
• Webpack: https://webpack.github.io/
• Rollup: http://rollupjs.org/
• Angular CLI: https://cli.angular.io/
• PWA: https://developers.google.com/web/progressive-web-apps/
BASTA! 2017
Resources

View Slide

Thank you! Questions?
Repository
Contact
@manuelrauber
[email protected]
https://github.com/thinktecture/basta-spring-2017-angular-demo

View Slide

Angular: Komponentenbasierte HTML5-Anwendungen für alle

Angular: Komponentenbasierte HTML5-Anwendungen für alle

Manuel Rauber

More Decks by Manuel Rauber

Other Decks in Programming

Featured

Transcript