asynchronous programming - done right · why asynchrony? • asynchrony • „[…] occurrence of...
TRANSCRIPT
![Page 1: Asynchronous Programming - Done right · Why asynchrony? • Asynchrony • „[…] occurrence of events independently of the main program flow and ways to deal with such events.“](https://reader031.vdocuments.site/reader031/viewer/2022041116/5f294fabac9dc83e9c058e49/html5/thumbnails/1.jpg)
Asynchronous Programming - Done right
![Page 2: Asynchronous Programming - Done right · Why asynchrony? • Asynchrony • „[…] occurrence of events independently of the main program flow and ways to deal with such events.“](https://reader031.vdocuments.site/reader031/viewer/2022041116/5f294fabac9dc83e9c058e49/html5/thumbnails/2.jpg)
ZWEI14.
![Page 3: Asynchronous Programming - Done right · Why asynchrony? • Asynchrony • „[…] occurrence of events independently of the main program flow and ways to deal with such events.“](https://reader031.vdocuments.site/reader031/viewer/2022041116/5f294fabac9dc83e9c058e49/html5/thumbnails/3.jpg)
ZWEI14 - A DIGITAL AGENCY WITH CREATIVE DNA. Idea, concept, design, technology and engage in perfectly together.
We are young but experienced, creative but down to earth, quickly but meticulously, budget-conscious but sophisticated, focused but versatile.
Innovation first. In every project.
![Page 4: Asynchronous Programming - Done right · Why asynchrony? • Asynchrony • „[…] occurrence of events independently of the main program flow and ways to deal with such events.“](https://reader031.vdocuments.site/reader031/viewer/2022041116/5f294fabac9dc83e9c058e49/html5/thumbnails/4.jpg)
Overview
• In this session: It is all about asynchrony • Non-blocking user interfaces (UIs) • Maintainable source code • JavaScript as used language for demonstration
• What we will cover: • Why should you think about asynchrony • Challenges of asynchronism • Proofed solution how to address these challenges
• What we will not cover: • New features of ES6 or ES7 (async, await, yield, function*)
![Page 5: Asynchronous Programming - Done right · Why asynchrony? • Asynchrony • „[…] occurrence of events independently of the main program flow and ways to deal with such events.“](https://reader031.vdocuments.site/reader031/viewer/2022041116/5f294fabac9dc83e9c058e49/html5/thumbnails/5.jpg)
Why asynchrony?
• Asynchrony • „[…] occurrence of events independently of the main
program flow and ways to deal with such events.“ [Alex, 2012]
• Separation of processes from main thread (Non-blocking) • Communication between client and server • Complex business workflows that have to be triggered
• Goal: The main thread should not be blocked
![Page 6: Asynchronous Programming - Done right · Why asynchrony? • Asynchrony • „[…] occurrence of events independently of the main program flow and ways to deal with such events.“](https://reader031.vdocuments.site/reader031/viewer/2022041116/5f294fabac9dc83e9c058e49/html5/thumbnails/6.jpg)
Asynchrony is (difficult)• Keep application state in sync
• Variables keep state of the asynchronous process • Error handling
• Even more states have to be introduced • Race conditions
• Changing the state before another process was finished • Memory leaks
• Can be difficult to fix
![Page 7: Asynchronous Programming - Done right · Why asynchrony? • Asynchrony • „[…] occurrence of events independently of the main program flow and ways to deal with such events.“](https://reader031.vdocuments.site/reader031/viewer/2022041116/5f294fabac9dc83e9c058e49/html5/thumbnails/7.jpg)
But…
… the evolution goes further
![Page 8: Asynchronous Programming - Done right · Why asynchrony? • Asynchrony • „[…] occurrence of events independently of the main program flow and ways to deal with such events.“](https://reader031.vdocuments.site/reader031/viewer/2022041116/5f294fabac9dc83e9c058e49/html5/thumbnails/8.jpg)
Let’s use our toolbox
Composite
Abstract Factory
Strategy
Prototype
Singleton Decorator
Visitor
Observer
Factory Method
Facade…Iterator
![Page 9: Asynchronous Programming - Done right · Why asynchrony? • Asynchrony • „[…] occurrence of events independently of the main program flow and ways to deal with such events.“](https://reader031.vdocuments.site/reader031/viewer/2022041116/5f294fabac9dc83e9c058e49/html5/thumbnails/9.jpg)
What have these in common?
Composite
Abstract Factory
Strategy
Prototype
SingletonDecorator
Visitor
Observer
Factory Method
Facade…Iterator
![Page 10: Asynchronous Programming - Done right · Why asynchrony? • Asynchrony • „[…] occurrence of events independently of the main program flow and ways to deal with such events.“](https://reader031.vdocuments.site/reader031/viewer/2022041116/5f294fabac9dc83e9c058e49/html5/thumbnails/10.jpg)
Let us ask the GoF…
![Page 11: Asynchronous Programming - Done right · Why asynchrony? • Asynchrony • „[…] occurrence of events independently of the main program flow and ways to deal with such events.“](https://reader031.vdocuments.site/reader031/viewer/2022041116/5f294fabac9dc83e9c058e49/html5/thumbnails/11.jpg)
Events• An Event…
• „[…] is an event is an action or occurrence recognised by software that may be handled by the software“
• „[…] can be generated or triggered by the system, by the user or in other ways“
• But, events are (simply) collections that are filled over time
const events = [{val: 1}, {val: 3}, {val: 5}]
![Page 12: Asynchronous Programming - Done right · Why asynchrony? • Asynchrony • „[…] occurrence of events independently of the main program flow and ways to deal with such events.“](https://reader031.vdocuments.site/reader031/viewer/2022041116/5f294fabac9dc83e9c058e49/html5/thumbnails/12.jpg)
Excerpt: Collections in JS
events.forEach(x => console.log(x.val))
events.map(x => return x.val - 1)
events.filter(x => return x.val > 2)
events.concatAll()
ForEach
Map
Filter
ConcatAll
events.concat(events)Concat
events.reduce((x,y) => return x + y), 0)Reduce
ES6 Syntax
![Page 13: Asynchronous Programming - Done right · Why asynchrony? • Asynchrony • „[…] occurrence of events independently of the main program flow and ways to deal with such events.“](https://reader031.vdocuments.site/reader031/viewer/2022041116/5f294fabac9dc83e9c058e49/html5/thumbnails/13.jpg)
Amount of ordered items1 const amountOfOrderedItems = user => {2 user.getOrderedItems.3 map(orderItems => {4 orderItems.5 filter(item => date > 02032016)}).6 concatAll().7 reduce((previous, next) => {8 return previous.amount + next.amount9 }, 0)10 }1112 console.log(amountOrderedItems(user))
ES6 Syntax
![Page 14: Asynchronous Programming - Done right · Why asynchrony? • Asynchrony • „[…] occurrence of events independently of the main program flow and ways to deal with such events.“](https://reader031.vdocuments.site/reader031/viewer/2022041116/5f294fabac9dc83e9c058e49/html5/thumbnails/14.jpg)
Observable• New collection type as part of ReactiveX
• Collection items over time
• Offers array functions to work with this new type • filter, map, reduce, concatAll
• Can be used for animations, events or requests • Ported to several languages
• Java, C, C#, JavaScript, Clojure, Swift, Scala,… • https://github.com/ReactiveX
const eventsOverTime = [{val: 1}, {val: 3}, val: 5},…]
![Page 15: Asynchronous Programming - Done right · Why asynchrony? • Asynchrony • „[…] occurrence of events independently of the main program flow and ways to deal with such events.“](https://reader031.vdocuments.site/reader031/viewer/2022041116/5f294fabac9dc83e9c058e49/html5/thumbnails/15.jpg)
Observable1 // Create an observable 2 const $input = $('#searchInput')3 const searchInput = Rx.Observable.fromEvent($input,'keyUp')
10 // Unsubscribe 11 subscription.dispose()
4 // Subscribe and do something with the events5 const subscription = searchInput.forEach(6 event => sendRequest(event)7 error => handleError(event) 8 () => console.log('done')9 )
![Page 16: Asynchronous Programming - Done right · Why asynchrony? • Asynchrony • „[…] occurrence of events independently of the main program flow and ways to deal with such events.“](https://reader031.vdocuments.site/reader031/viewer/2022041116/5f294fabac9dc83e9c058e49/html5/thumbnails/16.jpg)
What about race conditions?
• Processed in order that we want to processed
A
B C
D
A B D C
1)
2)
3)
time
![Page 17: Asynchronous Programming - Done right · Why asynchrony? • Asynchrony • „[…] occurrence of events independently of the main program flow and ways to deal with such events.“](https://reader031.vdocuments.site/reader031/viewer/2022041116/5f294fabac9dc83e9c058e49/html5/thumbnails/17.jpg)
What about race conditions?
• Processed in order that we want to processed
A
B C
D
A B DC
1)
2)
3)
time
concatAll()
Only possible by knowing when its done!!!
![Page 18: Asynchronous Programming - Done right · Why asynchrony? • Asynchrony • „[…] occurrence of events independently of the main program flow and ways to deal with such events.“](https://reader031.vdocuments.site/reader031/viewer/2022041116/5f294fabac9dc83e9c058e49/html5/thumbnails/18.jpg)
Unsubscribe
subscription.dispose()
• Manually unsubscribe when you do not need the event stream
• But, what happened if I forget to unsubscribe? • You are listening on the event stream • Consumes events that you do not need anymore • Can causes incorrect application state
• How can I can automatize the unsubscription? • Use another event stream that triggers the unsubscription • takeUntil(event)
!! Mem
ory Le
ak !!
![Page 19: Asynchronous Programming - Done right · Why asynchrony? • Asynchrony • „[…] occurrence of events independently of the main program flow and ways to deal with such events.“](https://reader031.vdocuments.site/reader031/viewer/2022041116/5f294fabac9dc83e9c058e49/html5/thumbnails/19.jpg)
Sum up
• Keep application state in sync • No additional variable necessary
• Error handling • Observables offers direct error handling
• Race conditions • Synchronized asynchronous processes
• Memory leaks • Unsubscribe only when condition is fulfilled
But the most important point is: It works in a great scale!
![Page 20: Asynchronous Programming - Done right · Why asynchrony? • Asynchrony • „[…] occurrence of events independently of the main program flow and ways to deal with such events.“](https://reader031.vdocuments.site/reader031/viewer/2022041116/5f294fabac9dc83e9c058e49/html5/thumbnails/20.jpg)
Any questions?
![Page 21: Asynchronous Programming - Done right · Why asynchrony? • Asynchrony • „[…] occurrence of events independently of the main program flow and ways to deal with such events.“](https://reader031.vdocuments.site/reader031/viewer/2022041116/5f294fabac9dc83e9c058e49/html5/thumbnails/21.jpg)
Thanks for your attention