Angular ist die Komplettlösung für die Umsetzung von Webapplikationen im Frontend. Ein so umfassendes Werkzeug hat allerdings auch seine Schattenseiten: Die Einstiegshürde ist relativ hoch. Dieser Vortrag stellt die wichtigsten Elemente des Frameworks wie Komponenten, Direktiven und Services vor. In einem praktischen Beispiel werden die verschiedenen Elemente von Angular Schritt für Schritt zu einer kompletten Applikation zusammengefügt. Damit lernen Sie nicht nur die Elemente des Frameworks kennen, sondern gleichzeitig die wichtigsten Architekturpatterns und zahlreiche Best Practices.
Warum ECMAScript 6 die Welt ein Stückchen besser machtSebastian Springer
Wo die Neuerungen von ECMAScript 5 recht unspektakulär waren, sind die Features des neuen Sprachstandards umso interessanter. ECMAScript 6 versucht einige Anforderungen zu erfüllen, mit denen man als JavaScript-Entwickler täglich konfrontiert ist. Klassische Beispiele sind hier Promises zum Umgang mit asynchronen Funktionen, ein Module Loader zur Strukturierung der Applikation, Generatoren und Iteratoren oder aber ein neuer Gültigkeitsbereich für Variablen. Aber nicht nur große Änderungen, sondern auch sinnvolle Erweiterungen bestehender Objekte wie String und Array halten mit dem neuen Standard Einzug in den Browser. Problematisch wird die Situation jedoch, wenn man in den Genuss verschiedener Features kommen möchte, die aktuell noch von keinem Browser unterstützt werden. Hier schafft Traceur, der ECMAScript-6-Compiler von Google, Abhilfe.
Angular ist die Komplettlösung für die Umsetzung von Webapplikationen im Frontend. Ein so umfassendes Werkzeug hat allerdings auch seine Schattenseiten: Die Einstiegshürde ist relativ hoch. Dieser Vortrag stellt die wichtigsten Elemente des Frameworks wie Komponenten, Direktiven und Services vor. In einem praktischen Beispiel werden die verschiedenen Elemente von Angular Schritt für Schritt zu einer kompletten Applikation zusammengefügt. Damit lernen Sie nicht nur die Elemente des Frameworks kennen, sondern gleichzeitig die wichtigsten Architekturpatterns und zahlreiche Best Practices.
Warum ECMAScript 6 die Welt ein Stückchen besser machtSebastian Springer
Wo die Neuerungen von ECMAScript 5 recht unspektakulär waren, sind die Features des neuen Sprachstandards umso interessanter. ECMAScript 6 versucht einige Anforderungen zu erfüllen, mit denen man als JavaScript-Entwickler täglich konfrontiert ist. Klassische Beispiele sind hier Promises zum Umgang mit asynchronen Funktionen, ein Module Loader zur Strukturierung der Applikation, Generatoren und Iteratoren oder aber ein neuer Gültigkeitsbereich für Variablen. Aber nicht nur große Änderungen, sondern auch sinnvolle Erweiterungen bestehender Objekte wie String und Array halten mit dem neuen Standard Einzug in den Browser. Problematisch wird die Situation jedoch, wenn man in den Genuss verschiedener Features kommen möchte, die aktuell noch von keinem Browser unterstützt werden. Hier schafft Traceur, der ECMAScript-6-Compiler von Google, Abhilfe.
Linked Data Experiences at Springer NatureMichele Pasin
An overview of how we're using semantic technologies at Springer Nature, and an introduction to our latest product: www.scigraph.com
(Keynote given at http://2016.semantics.cc/, Leipzig, Sept 2016)
"Identifying Springer's Author (with ORCID iD) on SpringerLink and the benefits" presented by Hazman Aziz, Account Development Manager for Southeast Asia at Springer Nature, at ORCID's Malaysia workshop on 28 February 2017.
Video: https://youtu.be/c_YVA-Aa7gA
New language, new framework, new tools and new concepts. Angular 2 beta is ready and gives developers a solid ground to build their applications.
This talk will go through the core concepts of Angular 2 including components, directives, observables and more!
AngularJS 101 - Everything you need to know to get startedStéphane Bégaudeau
In this presentation, you will find everything need to get started with AngularJS.
For more details, have a look at my blog (http://stephanebegaudeau.tumblr.com) or follow me on twitter (@sbegaudeau)
AngularJS 1.3 is by far the best version of Angular available today. It was just released a few weeks ago. It's chock full of bug fixes, feature enhancements and performance improvements.
YouTube link: - https://youtu.be/bghVyCbxj6g
FITC events. For digital creators.
Save 10% off ANY FITC event with discount code 'slideshare'
See our upcoming events at www.fitc.ca
Getting Started with Angular 2
with Rob McDiarmid
OVERVIEW
Angular 2 is a powerful framework that lets you create fast and scalable web apps with clean and readable code. With the lessons learned from previous web frameworks and the advantages of modern web technologies, the Angular team has created a framework that will push the limits of what SPAs are capable of.
In this session we’ll go through building an Angular 2.0 app from the ground up. In the process, you will learn how it handles core concepts like components, templates, services, and routing. You’ll also see how angular takes advantage of ES6 modules, Web Components, and TypeScript. By the end of the session, you’ll have a good understanding of why you might want to use Angular 2 for your next project and how to get started.
OBJECTIVE
Demonstrate what Angular 2 has to offer and reduce the barrier to entry.
TARGET AUDIENCE
Web Developers interested in learning Angular 2.
ASSUMED AUDIENCE KNOWLEDGE
Intermediate experience with JavaScript.
FIVE THINGS AUDIENCE MEMBERS WILL LEARN
1. Core concepts of the Angular 2 framework
2. How to use ES6 modules
3. The benefits of TypeScript annotations
4. How to setup an Angular 2 project from scratch
5. The ecosystem of tools that Angular 2 apps will be built on
Eine Sammlung von Best Practices für Applikationen mit AngularJS. Der Vortrag stellt Strukturen und Konventionen vor, mit denen sich auch umfangreiche Applikationen wartbar und erweiterbar halten lassen.
Was kann man machen, um Angular-1.x-Code auf Angular 2 vorzubereiten? Welche Möglichkeiten werden in der nächsten Zeit aufkommen, um einen Parallelbetrieb zu realisieren.
Linked Data Experiences at Springer NatureMichele Pasin
An overview of how we're using semantic technologies at Springer Nature, and an introduction to our latest product: www.scigraph.com
(Keynote given at http://2016.semantics.cc/, Leipzig, Sept 2016)
"Identifying Springer's Author (with ORCID iD) on SpringerLink and the benefits" presented by Hazman Aziz, Account Development Manager for Southeast Asia at Springer Nature, at ORCID's Malaysia workshop on 28 February 2017.
Video: https://youtu.be/c_YVA-Aa7gA
New language, new framework, new tools and new concepts. Angular 2 beta is ready and gives developers a solid ground to build their applications.
This talk will go through the core concepts of Angular 2 including components, directives, observables and more!
AngularJS 101 - Everything you need to know to get startedStéphane Bégaudeau
In this presentation, you will find everything need to get started with AngularJS.
For more details, have a look at my blog (http://stephanebegaudeau.tumblr.com) or follow me on twitter (@sbegaudeau)
AngularJS 1.3 is by far the best version of Angular available today. It was just released a few weeks ago. It's chock full of bug fixes, feature enhancements and performance improvements.
YouTube link: - https://youtu.be/bghVyCbxj6g
FITC events. For digital creators.
Save 10% off ANY FITC event with discount code 'slideshare'
See our upcoming events at www.fitc.ca
Getting Started with Angular 2
with Rob McDiarmid
OVERVIEW
Angular 2 is a powerful framework that lets you create fast and scalable web apps with clean and readable code. With the lessons learned from previous web frameworks and the advantages of modern web technologies, the Angular team has created a framework that will push the limits of what SPAs are capable of.
In this session we’ll go through building an Angular 2.0 app from the ground up. In the process, you will learn how it handles core concepts like components, templates, services, and routing. You’ll also see how angular takes advantage of ES6 modules, Web Components, and TypeScript. By the end of the session, you’ll have a good understanding of why you might want to use Angular 2 for your next project and how to get started.
OBJECTIVE
Demonstrate what Angular 2 has to offer and reduce the barrier to entry.
TARGET AUDIENCE
Web Developers interested in learning Angular 2.
ASSUMED AUDIENCE KNOWLEDGE
Intermediate experience with JavaScript.
FIVE THINGS AUDIENCE MEMBERS WILL LEARN
1. Core concepts of the Angular 2 framework
2. How to use ES6 modules
3. The benefits of TypeScript annotations
4. How to setup an Angular 2 project from scratch
5. The ecosystem of tools that Angular 2 apps will be built on
Eine Sammlung von Best Practices für Applikationen mit AngularJS. Der Vortrag stellt Strukturen und Konventionen vor, mit denen sich auch umfangreiche Applikationen wartbar und erweiterbar halten lassen.
Was kann man machen, um Angular-1.x-Code auf Angular 2 vorzubereiten? Welche Möglichkeiten werden in der nächsten Zeit aufkommen, um einen Parallelbetrieb zu realisieren.
Mehr als die Hälfte der Benutzer haben inzwischen ein Smartphone, mit unterschiedlichen Betriebssystemen, jedoch meist einem Touchscreen als Eingabegerät. Genau hier setzt Sencha Touch an, ein plattformübergreifendes Javascriptframework für mobile Endgeräte, welches sich auf Touchbedienung spezialisiert hat. Was für Möglichkeiten Sencha Touch bietet und welche Konzepte dahinter stecken wird Thema des Vortrags sein.
Frameworks wie Next.js und Nuxt versuchen, Client und Server wieder näher zusammenzubringen und setzen dabei auf die großen SPA-Frameworks React und Vue. Die leichtgewichtige Bibliothek htmx dagegen versucht, das gleiche Ziel auf ganz andere Weise zu erreichen. Muss es denn immer eine SPA sein? Reicht nicht auch in vielen Fällen deutlich weniger Overhead? Wir haben schließlich HTML als Strukturelement und CSS für das gute Aussehen. Genau diesen Ansatz greift htmx auf und erweitert die Fähigkeiten der HTML-Struktur. Serverkommunikation und Eventhandling erreichen mit dieser Bibliothek eine ganz neue Dimension.
Aber was bedeutet das für unsere tägliche Arbeit? Setzen wir in Zukunft alle neuen Applikationen nur noch mit htmx um, oder migrieren wir unsere Vue-Codebasis auf htmx? Diesen und vielen weiteren Fragen widmen wir uns in diesem Vortrag, nicht nur in der Theorie, sondern auch am praktischen Beispiel.
Node.js is a lightweight but yet capable platform for creating powerful web applications. The core of Node.js is kept small and restricted to a limited functionality that is extended by a vast ecosystem. With the right combination of packages you are able to build full-featured web applications. There is nearly no limit in features starting with simple problems such as authentication or logging over web interfaces with REST or GraphQL to a whole application based on a microservices architecture. In this talk I will introduce you to some commonly used packages and show you how to use them by example.
Node.js and microservices go hand in hand. This comes mainly from the design of Node.js. It is a specialised small platform with an enormous package environment. The NPM ecosystem provides a lot of packages you can use to build your microservice. The two most popular frameworks for this job are Express and Seneca. In this talk I will show you how you can communicate synchronously and asynchronously with your microservices and how easy it is to put your Node.js application into a docker container.
Nobody likes to wait for web pages to load in the browser. The longer it takes, the more dissatisfied the users become. Slow web pages lead to a higher bounce rate and the loss of customers. To solve this kind of problems can be very hard sometimes. Before you even start to optimise your page, you have to understand the workflows a browser performs in order to display a page on the screen. In this talk you will get some insights in the critical rendering path and the javascript engine of your browser that help you to find performance problems and solve them. I will show you also some tools and best practices that make your life easier when it comes to performance.
Lange Wartezeiten und mangelnde Responsivität unserer Webapplikation führen zu unzufriedenen Benutzern, was sich in hohen Absprungraten und Abwanderung zur Konkurrenz oder einfach der Weigerung, die Applikation zu verwenden, niederschlägt. Das Problem einer langsamen Applikation lässt sich jedoch leider nicht ganz so einfach lösen. Wichtig für eine nachhaltige Lösung ist das Verständnis der Abläufe im Browser. Aus diesem Grund beschäftigen wir uns hier mit Konzepten wie dem Critical Rendering Path und einigen Charakteristiken der JavaScript-Engines. Im Zuge dieses Vortrags werden einige der häufigsten Problemstellungen von Webapplikationen analysiert und Lösungsansätze und Best Practices zur Behebung der Performanceprobleme vorgestellt.
Features einer Applikation werden häufig implementiert, weil die Verantwortlichen vermuten, dass diese Funktionalitäten einen Mehrwert für die Benutzer der Applikation bieten. Je nach Umfang wird mehr oder weniger Geld investiert. Ohne weitere Unterstützung sind und bleiben es jedoch Vermutungen. Eine bessere Lösung bieten hier A/B-Tests. Features werden kostengünstig in einer oder mehreren Varianten umgesetzt und mit einer Kontrollimplementierung verglichen. Die Umsetzung, die sich als die beste herausstellt, wird überarbeitet und bleibt in der Applikation erhalten. Diese Vorgehensweise lässt sich sehr gut in node.js-Applikationen integrieren. Mithilfe von A/B-Tests können Sie Ihre Applikation an den Anforderungen Ihrer Benutzer ausrichten.
Mein Vortrag auf der EnterJS 2015 über Sicherheit in Node.js Applikationen. Es werden verschiedene Angriffsvektoren vorgestellt und wie man ihnen begegnen kann.
Typescript zur Applikationsentwicklung nutzen. Hier werden die wichtigsten Features der Sprache kurz vorgestellt und am konkreten Beispiel deren Einsatz gezeigt.
Testgetriebene Entwicklung mit Jasmine und Karma hat sich mittlerweile schon als defacto-Standard etabliert. Routinen ohne Abhängigkeiten lassen sich damit ohne Probleme testen. Die Schwierigkeiten beginnen jedoch schon, wenn es um die Auflösung von Abhängigkeiten geht. In diesem Vortrag werden verschiedene Strategien und Werkzeuge vorgestellt, mit denen Abhängigkeiten zu Objekten und Funktionen oder zum Server abgedeckt werden können. Aber nicht nur Abhängigkeiten stellen Schwierigkeiten bei der testgetriebenen Entwicklung dar, auch der Umgang mit Fixtures ist bei der testgetriebenen Entwicklung mit JavaScript relevant. Abgerundet wird dieser Vortrag mit einigen Best Practices für die testgetriebenen Entwicklung mit JavaScript.
In diesem Vortrag werden drei zentrale Fragen gestellt (und beantwortet):
Wie bringe ich meine Idee schnell auf den Markt?
Wie finde ich heraus, ob meine Idee gut ist?
Wie kann ich auf geänderte Anforderungen reagieren?
Wie erstelle ich Webapplikationen mit Node.js. Vorgestellt werden verschiedene Frameworks wie Express.js oder Koa. Außerdem wird auf Skalierung eingegangen.
Wie kann ich die Browser Tools zum Auffinden von Fehlern und Schwachstellen in meinem Sourcecode benutzen? Dieser Talk stellt die wichtigsten Features vor.
Translate your angular application with angular translate by Pascal Precht. It's a module consisting of filters, services and directives for translating various strings.
9. Angular CLI
Installiert alle benötigten Abhängigkeiten.
Legt eine Projektstruktur an.
Stellt eine Entwicklungsumgebung zur Verfügung.
Kommandos zum Scaffolding.
Kommandos zum Bauen der Applikation.
10. Angular CLI
ng serve: liefert die Applikation auf localhost:4200 aus
Proxykonfiguration für Backend möglich.
ng build: baut die Applikation für den Produktivbetrieb
12. import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
13. Module
declarations: Komponenten und Direktiven
imports: Weitere Module importieren
providers: Global im Modul verfügbare Services
bootstrap: Die Bootstrapping Komponente angeben
19. Komponenten
Eine Komponente pro Datei.
Pro Komponente ein Verzeichnis.
Dateiname: <Bezeichnung>.component.ts
add-list.component.ts
20. Komponenten
Selektoren prefixen - z.B. mit Applikations-Shortcut.
Komponenten an Elemente binden. Attribute, Klassen und IDs
sind zwar möglich, sollte man aber nicht nutzen.
21. Templates
import { Component } from '@angular/core';
@Component({
selector: 'add-list',
template: ‘<div>Hello World</div>‘,
})
export class AddListComponent {
}
Bei sehr kleinen Komponenten können die Templates inline
erzeugt werden. Im Normalfall liegen sie aber in einer eigenen
Datei.
22. Styles
Angular erlaubt es Styles pro Komponente zu erzeugen.
Diese gelten dann nur für die Komponente.
Styles können auch inline oder in einer separaten Datei
geschrieben werden
27. Darstellung von
Informationen
Wir arbeiten mit Typescript, also können wir auch Klassen für
unsere Datenstrukturen erstellen.
export class Address {
constructor(
public name: string,
public street: string,
public place: string,
public rating: number) {}
}
28. Direktiven
Struktur Direktiven
verändern die Struktur
der View.
ngIf, ngFor
Attribut Direktiven
beeinflussen das Verhalten
von Elementen
ngStyle
Die Angular-eigenen Direktiven werden über das
BrowserModule zur Verfügung gestellt.
30. Direktiven
Der * bei Strukturdirektiven ist eine Shortcut-Form für die
Template-Schreibweise.
Strukturdirektiven nutzen intern HTML5 Template-Tags.
<p *ngIf="condition">
Hello World
</p>
<template [ngIf]="condition">
<p>
Hello World
</p>
</template>
36. Komponentenhierarchie
Eine Kindkomponente wird erstellt, sobald die
Elternkomponente zu umfangreich wird,
zu viele Dinge parallel tut
oder wenn Elemente an anderen Stellen wiederverwendet
werden sollen.
44. Kind → Eltern
Da die Informationen per Referenz an die Kinder übergeben
werden, können diese die Informationen verändern und die
Elternkomponente erhält die Änderungen ebenfalls.
47. Kind → Eltern
1. Eventemitter in der Kindkomponente implementieren
2. Eventemitter mit dem @Output Decorator kennzeichnen
3. Eventbinding in der Elternkomponente umsetzen
4. Methode zur Behandlung in der Elternkomponente
implementieren
48. Kind → Eltern
import { Component, OnInit, Input, Output, EventEmitter }
from '@angular/core';
import { RatingItem } from '../shared/rating-item';
@Component({…})
export class AppRatingComponent {
@Input() item: RatingItem;
@Output() rating = new EventEmitter();
rate(value) {
var copy = Object.assign({}, this.item)
copy.rating = value;
this.rating.emit(copy);
}
}
52. Service
Services werden zur Auslagerung von Logik verwendet.
Sie können Informationen zur Verfügung stellen oder zur
Kommunikation verwendet werden.
65. Pipes
Pipes werden verwendet, um eine Eingabe in eine Ausgabe
zu transformieren.
Pipes werden hauptsächlich in Templates eingesetzt.
Pipes können parametrisiert werden: value | pipe : ‘a’: ‘b’
Mehrere Pipes können hintereinander geschaltet werden.
66. Pipes
1. Pipe erzeugen
2. Pipe im Module, im Abschnitt declarations registrieren
3. Pipe im Template nutzen
67. Pipes
$ ng g pipe converter
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'converter'
})
export class ConverterPipe implements PipeTransform {
transform(value: any, what: string): any {
let multiplier = 1;
…
return value * multiplier;
}
}
70. Pipes
Aus Performancegründen gibt es keine OrderBy- und Filter-
Pipes in Angular mehr. Diese müssen entweder über externe
Module eingebunden werden oder selbst implementiert
werden.
80. Routing
Routing wird zur Navigation in Single Page-Applikationen
verwendet.
Der Angular Router kann verschiedene Komponenten an
bestimmten stellen der Applikation einbinden, je nachdem
welche Applikationsstatus aktiviert wird.
Der Applikationsstatus kann über die URL geändert werden.
88. 3rd Party Module
Module von Drittanbietern stellen Komponenten, Direktiven,
Pipes und Services zur Verfügung.
Sie können in die Applikation eingebunden und verwendet
werden.