Tomasz Ducin
independent consultant, architect, developer, trainer, speaker #architecture #performance #javascript #typescript #react #angular
Tomasz Ducin
DAY MONTH, YEAR
COMPANY, CITY
React: modern UIs
Tomasz Ducin
3rd July 2019
Orange, Warsaw
-
bottega.com.pl
-
art-of-software.blogspot.com
-
twitter.com/bottega_it
-
facebook.com/BottegaITSolutions
Praktycy dla praktyków
Szkolenia i doradztwo
Tomasz Ducin
JavaScript 4 life
software architect & dev @ Ivanti
trainer @ Bottega IT Minds
conference junkie
Tomasz Ducin
JavaScript 4 life
software architect & dev
trainer
conference junkie
Tomasz Ducin
JavaScript 4 life
software architect & dev @ivanti
trainer @Bottega IT Minds
conference junkie
Tomasz Ducin
JavaScript 4 life
developer & architect
trainer @Bottega IT Minds
Title Text
The Future of JavaScript Architecture
Tomasz Ducin • @tomasz_ducin • bit.ly/js-arch-future
jQuery
Architect's Guide
to Frontend Frameworks
Tomasz Ducin • @tomasz_ducin • bit.ly/fe-arch
It seems that perfection is attained, not when there is nothing more to add, but when there is nothing more to take away.
Antoine de Saint Exupéry
async/await usecase
async/await usecase
async function scheduleTransfer(component){
let transferID = await model.beginTransfer();
}async function scheduleTransfer(component){
let transferID = await model.beginTransfer();
// waiting for user to input data
await component.completedStep1();
await model.setTransferDetails(transferID, details);
// waiting for user confirmation
await component.completedStep2();
await model.confirmTransfer(transferID);
// waiting for user closing popup
await component.completedStep3();
return transferID;
}
async function scheduleTransfer(component){
let transferID = await model.beginTransfer();
// waiting for user to input data
await component.completedStep1();
}
async function scheduleTransfer(component){
let transferID = await model.beginTransfer();
// waiting for user to input data
await component.completedStep1();
await model.setTransferDetails(transferID, details);
}
async function scheduleTransfer(component){
let transferID = await model.beginTransfer();
// waiting for user to input data
await component.completedStep1();
await model.setTransferDetails(transferID, details);
// waiting for user confirmation
await component.completedStep2();
}async function scheduleTransfer(component){
let transferID = await model.beginTransfer();
// waiting for user to input data
await component.completedStep1();
await model.setTransferDetails(transferID, details);
// waiting for user confirmation
await component.completedStep2();
await model.confirmTransfer(transferID);
}
async function scheduleTransfer(component){
let transferID = await model.beginTransfer();
// waiting for user to input data
await component.completedStep1();
await model.setTransferDetails(transferID, details);
// waiting for user confirmation
await component.completedStep2();
await model.confirmTransfer(transferID);
// waiting for user closing popup
await component.completedStep3();
}
async function scheduleTransfer(component){
let transferID = await model.beginTransfer();
}async function scheduleTransfer(component){
let transferID = await model.beginTransfer();
// waiting for user to input data
await component.completedStep1();
await model.setTransferDetails(transferID, details);
// waiting for user confirmation
await component.completedStep2();
await model.confirmTransfer(transferID);
// waiting for user closing popup
await component.completedStep3();
return transferID;
}
async function scheduleTransfer(component){
let transferID = await model.beginTransfer();
// waiting for user to input data
await component.completedStep1();
}
async function scheduleTransfer(component){
let transferID = await model.beginTransfer();
// waiting for user to input data
await component.completedStep1();
await model.setTransferDetails(transferID, details);
}
async function scheduleTransfer(component){
let transferID = await model.beginTransfer();
// waiting for user to input data
await component.completedStep1();
await model.setTransferDetails(transferID, details);
// waiting for user confirmation
await component.completedStep2();
}async function scheduleTransfer(component){
let transferID = await model.beginTransfer();
// waiting for user to input data
await component.completedStep1();
await model.setTransferDetails(transferID, details);
// waiting for user confirmation
await component.completedStep2();
await model.confirmTransfer(transferID);
}
async function scheduleTransfer(component){
let transferID = await model.beginTransfer();
// waiting for user to input data
await component.completedStep1();
await model.setTransferDetails(transferID, details);
// waiting for user confirmation
await component.completedStep2();
await model.confirmTransfer(transferID);
// waiting for user closing popup
await component.completedStep3();
}
functions
sync vs async
promises
async await
coroutines
CSP
generators
callbacks
events
reactive streams
run to completion
event loop
functions
sync vs async
promises
async await
coroutines
CSP
generators
callbacks
events
reactive streams
run to completion
event loop
functions
sync vs async
promises
async await
coroutines
CSP
generators
callbacks
events
reactive streams
run to completion
event loop
- data & time
Stream
A
,
,
,
never
completed
Variable
- data
A'
A''
A'''
A
A'
A''
A'''
functional programming
(im)mutability
closures
currying
thunk
memoization
purity
arity
HOF
reducers
transducers
RxCpp
Rx.rb
RxPHP
RxJS
RxJava
RxPY
RxKotlin
RxSwift
RxSwift
RxLua
RxClojure
Rx.NET
UniRx
RxScala
RxGroovy
RxGo
RxDart
Tomasz Ducin
13th July 2017, London
FullStack
FullStack
5 Architectures of Asynchronous JavaScript
conference on JavaScript, Node & Internet of Things
conference on JavaScript, Node & Internet of Things
Tomasz Ducin
13th July 2017, London
5 Architectures of Asynchronous JavaScript
Exercises setup
Anonymous Functions
var state = 5;
var calc = function(cb){
state = cb(state);
return state;
};var state = 5;
function calc(cb){
state = cb(state);
return state;
};calc(function(value){ return value * 2; }); // 10
calc(); // Uncaught TypeError: cb is not a function
var generator = function(initial){
var state = initial;
return function(cb){
state = cb(state);
return state;
};
};var generator = function outer(initial){
var state = initial;
return function calc(cb){
state = cb(state);
return state;
};
};var gen = generator(100);
gen(function(val){ return val * 2; }); // 200
gen(function(val){ return val + 5; }); // 205
gen(); // Uncaught TypeError: cb is not a function
Anonymous Functions
THX!
4 Q&A
THX!
Reducers
class EmployeePanel extends React.Component {
constructor() {
super();
this.state = {
country: undefined,
employees: undefined
};
this.fetchEmployees();
}
fetchEmployees() {
EmployeeSvc.get(this.state.country).then(employees =>
this.setState({ employees })
);
}
render() {
return (
<div>
<EmployeeFilters
onCountryChange={this.handleCountryChanged} />
{this.state.employees.map(e => <Employee employee={e} />)}
</div>
);
}
} handleCountryChanged = (country) => {
this.setState({ country })
};
componentDidUpdate(prevProps, prevState){
if (this.state.country !== prevState.country){
this.fetchEmployees()
}
}trashy
By Tomasz Ducin
