SlideShare ist ein Scribd-Unternehmen logo
1 von 23
Nigh7 of the pack
3. Event
Agenda
Kurzvorstellung Pack of 7
Hauptthema:
Asynchrone Programmierung in JavaScript/TypeScript
Teil 1
Pizza & Bier stehen hoffentlich bei euch bereit!
Kurze Pause
High-Level Einführung in RxJS - Reactive Extensions for JavaScript von Microsoft
Teil 2
Kurzvorstellung Pack of 7
Im Jahr 2013 gegründet
Köln, Lüdinghausen (bei Dortmund) und Brisbane (Australien)
3 Standorte – 17 Mitarbeiter
SharePoint, Mobile, BI, Cloud, Java
Beratung und Entwicklung
Produkte
- ProfileManager (CV-Tool)
- Workspacemanagement (Verwaltung Arbeitsräume in SharePoint)
- SharePoint Driven Application (Glossar, Poolwagenverwaltung, Ticketsysteme, Raumverwaltungstool,
etc.)
Christoph Häckel <c.haeckel@packof7.com
Frontend seit 2002
Node.js seit 2010
TypeScript seit 2019
JavaScript ist easy
Zeile für Zeile
Synchrone Ausführung
Es gibt nur 1 UI-Thread im Browser
Single Threaded
const myFunction = function() { return `I am an anonymous function` };
Variablen können Funktionen enthalten
Arrow Functions
const myFunction = () => { return `even shorter` }; // is the same as
const myFunction = () => `even shorter`; // Functional Programming
Browser APIs
WebGL, fetch, localStorage, console, setTimeout, WebSocket, …
JavaScript ist hart
+ async APIs: Network Events, Timers, Promises, DOM Events (Pointer/Click), postMessage
Synchrone Ausführung
+ non-blocking! Callback Stack, Job Queue, Microtask Queue, Event Loop
Single Threaded
+ Der Bezug zu Variablen in der darüberliegenden Scope bleibt erhalten
+ Closures https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
Variablen können Funktionen enthalten
Arrow Functions
+ Functional programming syntax.
+ Used as Callbacks, Promises resolvers, Generators. Hard to use in OOP (no .bind() support)
Browser APIs
+ WebWorker, postMessage, DOM manipulation, history.pushState, WebRTC,
WebAssembly (WASM), WebGL. Powerful APIs built into the browser, not into JavaScript itself
SharePoint Framework
aka SPFX
Was ist SharePoint Framework (SPFx)?
Ausführung im Webbrowser
Client-seitiges SharePoint Development
Node.js, npm, gulp, webpack, yeoman generator, TypeScript
Open Source Tools
Responsiveness, Theme Support, Framework agnostic (React, Angular, Plain JS)
Mobile ready
SharePoint online und On-premise
2016 onwards
2019 onwards
Documentation
https://aka.ms/spfx - SharePoint Framework Guides
https://developer.microsoft.com/de-DE/fluentui - Fluent UI (React Components)
Yeoman Generator
Scaffolding eines neuen Projekts/WebParts in wenigen Schritten
React, Knockout.js oder VanillaJS
Live Demo
Documentation
https://aka.ms/spfx
https://developer.microsoft.com/de-DE/fluentui
Async JavaScript
function
() => {}
Promise.all Promise.race
resolve reject yield
function * async await
-
thunk callback reactive
event parallel coroutine
non-blocking thread future
deferred time-independent
state trust inversion of
control
Ein kleiner Vorgeschmack
Async JavaScript
function
() => {}
Promise.all Promise.race
resolve reject yield
function * async await
-
thunk callback reactive
event parallel coroutine
non-blocking thread
future deferred time-
independent state trust
inversion of control
Ein kleiner Vorgeschmack
Callback style
13
const url = "http://httpbin.org/json";
const fetchData = (errorCallback, successCallback, uri, type = "json") =>
{
fetch(uri)
.then((res) => {
if (type === "json") {
res.json().then(successCallback).catch(errorCallback);
} else if (type === "blob") {
res.blob().then(successCallback).catch(errorCallback);
} else if (type === "text") {
res.text().then(successCallback).catch(errorCallback);
}
})
.catch(errorCallback);
};
fetchData(
(err) => {
alert("Something went wrong!nnError was: " + err);
},
(data) => {
const text = JSON.stringify(data, undefined, 2);
addResponseText(text);
},
url
);
Promises, Promises
15
Iterator/Generator
17
Async/await
19
Pizza time
Observables
Live Demo
Weiterführende Ressourcen:
https://reactivex.io
An API for asynchronous programming
with observable streams
https://www.haskell.org/
An advanced, purely functional programming language
http://reactivex.io/learnrx/
Interactive Rx Tutorial
https://rxmarbles.com/
Interactive diagrams of Rx Observables
Vielen Dank für eure
Aufmerksamkeit

Weitere ähnliche Inhalte

Was ist angesagt?

Progressive Web Apps mit Angular
Progressive Web Apps mit AngularProgressive Web Apps mit Angular
Progressive Web Apps mit AngularJens Binfet
 
Rhomobile
RhomobileRhomobile
RhomobileJan Ow
 
Acceptance Testing - Automatisierte Web App Tests mit CasperJS
Acceptance Testing - Automatisierte Web App Tests mit CasperJSAcceptance Testing - Automatisierte Web App Tests mit CasperJS
Acceptance Testing - Automatisierte Web App Tests mit CasperJSBjörn Wilmsmann
 
ASP.NET Core – Troublemaker oder Problemsolver?
ASP.NET Core – Troublemaker oder Problemsolver?ASP.NET Core – Troublemaker oder Problemsolver?
ASP.NET Core – Troublemaker oder Problemsolver?POINT. Consulting GmbH
 
Automatisierte Entwickler VMs -- "works on my machine" zählt nicht mehr ;-)
Automatisierte Entwickler VMs -- "works on my machine" zählt nicht mehr ;-)Automatisierte Entwickler VMs -- "works on my machine" zählt nicht mehr ;-)
Automatisierte Entwickler VMs -- "works on my machine" zählt nicht mehr ;-)Torben Knerr
 

Was ist angesagt? (7)

Progressive Web Apps mit Angular
Progressive Web Apps mit AngularProgressive Web Apps mit Angular
Progressive Web Apps mit Angular
 
Rhomobile
RhomobileRhomobile
Rhomobile
 
Acceptance Testing - Automatisierte Web App Tests mit CasperJS
Acceptance Testing - Automatisierte Web App Tests mit CasperJSAcceptance Testing - Automatisierte Web App Tests mit CasperJS
Acceptance Testing - Automatisierte Web App Tests mit CasperJS
 
ASP.NET Core – Troublemaker oder Problemsolver?
ASP.NET Core – Troublemaker oder Problemsolver?ASP.NET Core – Troublemaker oder Problemsolver?
ASP.NET Core – Troublemaker oder Problemsolver?
 
Automatisierte Entwickler VMs -- "works on my machine" zählt nicht mehr ;-)
Automatisierte Entwickler VMs -- "works on my machine" zählt nicht mehr ;-)Automatisierte Entwickler VMs -- "works on my machine" zählt nicht mehr ;-)
Automatisierte Entwickler VMs -- "works on my machine" zählt nicht mehr ;-)
 
Vorstellung von Ember.js
Vorstellung von Ember.jsVorstellung von Ember.js
Vorstellung von Ember.js
 
Automatisierung mit grunt
Automatisierung mit gruntAutomatisierung mit grunt
Automatisierung mit grunt
 

Ähnlich wie 3. Night of the pack

Fachreferat: Visual Studio 2012, Windows 8 und .NET 4.5
Fachreferat: Visual Studio 2012, Windows 8 und .NET 4.5Fachreferat: Visual Studio 2012, Windows 8 und .NET 4.5
Fachreferat: Visual Studio 2012, Windows 8 und .NET 4.5Digicomp Academy AG
 
Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Jürg Stuker
 
Ajax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google SuggestAjax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google SuggestBastian Feder
 
Roadmap von Microsoft UI Technologien und Windows 8
Roadmap von Microsoft UI Technologien und Windows 8Roadmap von Microsoft UI Technologien und Windows 8
Roadmap von Microsoft UI Technologien und Windows 8chmoser79
 
Roadmap von Microsoft UI-Technologien und Windows 8
Roadmap von Microsoft UI-Technologien und Windows 8Roadmap von Microsoft UI-Technologien und Windows 8
Roadmap von Microsoft UI-Technologien und Windows 8chmoser79
 
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...Marc Müller
 
MEAN SCS in der Cloud
MEAN SCS in der CloudMEAN SCS in der Cloud
MEAN SCS in der CloudTorsten Fink
 
B3 Lotus Expeditor Und Composite Applications
B3 Lotus Expeditor Und Composite ApplicationsB3 Lotus Expeditor Und Composite Applications
B3 Lotus Expeditor Und Composite ApplicationsAndreas Schulte
 
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft AG
 
Einführung in die webOS Programmierung
Einführung in die webOS ProgrammierungEinführung in die webOS Programmierung
Einführung in die webOS ProgrammierungMarkus Leutwyler
 
Push-Benachrichtigungen in SharePoint via SignalR
Push-Benachrichtigungen in SharePoint via SignalRPush-Benachrichtigungen in SharePoint via SignalR
Push-Benachrichtigungen in SharePoint via SignalRChristian Heindel
 
B1 Acocon Lotus Day 08.09.2009
B1 Acocon Lotus Day 08.09.2009B1 Acocon Lotus Day 08.09.2009
B1 Acocon Lotus Day 08.09.2009Andreas Schulte
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Patrick Lauke
 
Config as Code: Der Weg zu Configuration as Code
Config as Code: Der Weg zu Configuration as CodeConfig as Code: Der Weg zu Configuration as Code
Config as Code: Der Weg zu Configuration as CodeDevOps Meetup Bern
 
Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...
Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...
Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...Gregor Biswanger
 

Ähnlich wie 3. Night of the pack (20)

Fachreferat: Visual Studio 2012, Windows 8 und .NET 4.5
Fachreferat: Visual Studio 2012, Windows 8 und .NET 4.5Fachreferat: Visual Studio 2012, Windows 8 und .NET 4.5
Fachreferat: Visual Studio 2012, Windows 8 und .NET 4.5
 
Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Top 10 Internet Trends 2006
Top 10 Internet Trends 2006
 
Ajax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google SuggestAjax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google Suggest
 
Roadmap von Microsoft UI Technologien und Windows 8
Roadmap von Microsoft UI Technologien und Windows 8Roadmap von Microsoft UI Technologien und Windows 8
Roadmap von Microsoft UI Technologien und Windows 8
 
Roadmap von Microsoft UI-Technologien und Windows 8
Roadmap von Microsoft UI-Technologien und Windows 8Roadmap von Microsoft UI-Technologien und Windows 8
Roadmap von Microsoft UI-Technologien und Windows 8
 
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
 
MEAN SCS in der Cloud
MEAN SCS in der CloudMEAN SCS in der Cloud
MEAN SCS in der Cloud
 
B3 Lotus Expeditor Und Composite Applications
B3 Lotus Expeditor Und Composite ApplicationsB3 Lotus Expeditor Und Composite Applications
B3 Lotus Expeditor Und Composite Applications
 
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform Apps
 
Kevin Hofer
Kevin HoferKevin Hofer
Kevin Hofer
 
profil_2017
profil_2017profil_2017
profil_2017
 
Einführung in die webOS Programmierung
Einführung in die webOS ProgrammierungEinführung in die webOS Programmierung
Einführung in die webOS Programmierung
 
Push-Benachrichtigungen in SharePoint via SignalR
Push-Benachrichtigungen in SharePoint via SignalRPush-Benachrichtigungen in SharePoint via SignalR
Push-Benachrichtigungen in SharePoint via SignalR
 
Was ist neu in .NET 4.5?
Was ist neu in .NET 4.5?Was ist neu in .NET 4.5?
Was ist neu in .NET 4.5?
 
GWT
GWTGWT
GWT
 
B1 Acocon Lotus Day 08.09.2009
B1 Acocon Lotus Day 08.09.2009B1 Acocon Lotus Day 08.09.2009
B1 Acocon Lotus Day 08.09.2009
 
APEX 5.0, und sonst?
APEX 5.0, und sonst?APEX 5.0, und sonst?
APEX 5.0, und sonst?
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
 
Config as Code: Der Weg zu Configuration as Code
Config as Code: Der Weg zu Configuration as CodeConfig as Code: Der Weg zu Configuration as Code
Config as Code: Der Weg zu Configuration as Code
 
Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...
Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...
Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...
 

3. Night of the pack

  • 1. Nigh7 of the pack 3. Event
  • 2. Agenda Kurzvorstellung Pack of 7 Hauptthema: Asynchrone Programmierung in JavaScript/TypeScript Teil 1 Pizza & Bier stehen hoffentlich bei euch bereit! Kurze Pause High-Level Einführung in RxJS - Reactive Extensions for JavaScript von Microsoft Teil 2
  • 3. Kurzvorstellung Pack of 7 Im Jahr 2013 gegründet Köln, Lüdinghausen (bei Dortmund) und Brisbane (Australien) 3 Standorte – 17 Mitarbeiter SharePoint, Mobile, BI, Cloud, Java Beratung und Entwicklung Produkte - ProfileManager (CV-Tool) - Workspacemanagement (Verwaltung Arbeitsräume in SharePoint) - SharePoint Driven Application (Glossar, Poolwagenverwaltung, Ticketsysteme, Raumverwaltungstool, etc.)
  • 4. Christoph Häckel <c.haeckel@packof7.com Frontend seit 2002 Node.js seit 2010 TypeScript seit 2019
  • 5. JavaScript ist easy Zeile für Zeile Synchrone Ausführung Es gibt nur 1 UI-Thread im Browser Single Threaded const myFunction = function() { return `I am an anonymous function` }; Variablen können Funktionen enthalten Arrow Functions const myFunction = () => { return `even shorter` }; // is the same as const myFunction = () => `even shorter`; // Functional Programming Browser APIs WebGL, fetch, localStorage, console, setTimeout, WebSocket, …
  • 6. JavaScript ist hart + async APIs: Network Events, Timers, Promises, DOM Events (Pointer/Click), postMessage Synchrone Ausführung + non-blocking! Callback Stack, Job Queue, Microtask Queue, Event Loop Single Threaded + Der Bezug zu Variablen in der darüberliegenden Scope bleibt erhalten + Closures https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures Variablen können Funktionen enthalten Arrow Functions + Functional programming syntax. + Used as Callbacks, Promises resolvers, Generators. Hard to use in OOP (no .bind() support) Browser APIs + WebWorker, postMessage, DOM manipulation, history.pushState, WebRTC, WebAssembly (WASM), WebGL. Powerful APIs built into the browser, not into JavaScript itself
  • 8. Was ist SharePoint Framework (SPFx)? Ausführung im Webbrowser Client-seitiges SharePoint Development Node.js, npm, gulp, webpack, yeoman generator, TypeScript Open Source Tools Responsiveness, Theme Support, Framework agnostic (React, Angular, Plain JS) Mobile ready SharePoint online und On-premise 2016 onwards 2019 onwards Documentation https://aka.ms/spfx - SharePoint Framework Guides https://developer.microsoft.com/de-DE/fluentui - Fluent UI (React Components)
  • 9. Yeoman Generator Scaffolding eines neuen Projekts/WebParts in wenigen Schritten React, Knockout.js oder VanillaJS
  • 11. Async JavaScript function () => {} Promise.all Promise.race resolve reject yield function * async await - thunk callback reactive event parallel coroutine non-blocking thread future deferred time-independent state trust inversion of control Ein kleiner Vorgeschmack Async JavaScript function () => {} Promise.all Promise.race resolve reject yield function * async await - thunk callback reactive event parallel coroutine non-blocking thread future deferred time- independent state trust inversion of control Ein kleiner Vorgeschmack
  • 13. 13 const url = "http://httpbin.org/json"; const fetchData = (errorCallback, successCallback, uri, type = "json") => { fetch(uri) .then((res) => { if (type === "json") { res.json().then(successCallback).catch(errorCallback); } else if (type === "blob") { res.blob().then(successCallback).catch(errorCallback); } else if (type === "text") { res.text().then(successCallback).catch(errorCallback); } }) .catch(errorCallback); }; fetchData( (err) => { alert("Something went wrong!nnError was: " + err); }, (data) => { const text = JSON.stringify(data, undefined, 2); addResponseText(text); }, url );
  • 15. 15
  • 17. 17
  • 19. 19
  • 22. Live Demo Weiterführende Ressourcen: https://reactivex.io An API for asynchronous programming with observable streams https://www.haskell.org/ An advanced, purely functional programming language http://reactivex.io/learnrx/ Interactive Rx Tutorial https://rxmarbles.com/ Interactive diagrams of Rx Observables
  • 23. Vielen Dank für eure Aufmerksamkeit

Hinweis der Redaktion

  1. nvm use gulp serve
  2. Fabric UI -> Fluent UI, How to Start
  3. Fabric UI -> Fluent UI, How to Start