Pro kodéry je tvorba responsivních webových aplikací zvláštní kapitolou. React přináší nový přístup k tvorbě uživatelských rozhraní. Moje přednáška je určená pro ty kodéry, kteří s Reactem začínají a nebo váhají, zda by mohl být pro ně tou správnou cestou, kterou se vydat.
Vývoj frontendu na redakčním systému? ... aneb jak udržet pořádek v š...Martin Pešout
Pokud začínáte nový projekt, je vždy důležitou volbou správné struktování dat. Dlouhou dobu mě trápilo, že frontend vývojáři dělají řadu chyb hned na začátcích, pokud tvoří projekt nasazený radakčních systémech jako Wordpress nebo Drupal. Chtěl bych vám ukázat svůj způsob jak strukturovat frontend pro šablony, jak pracovat s gitem a hlavně jak vytvořit projekt, který s vámi bude růst a nebude se zanášet “balastem”.
During the past six months here at Wimdu, we have been working on making our front end pure, by incrementally introducing Redux, ImmutableJS, and higher-order components, all under the restrictions of a Rails application and constant requests for new features. I will share the techniques, tools, and processes we have been using along with pitfalls to avoid.
This speech was presented at Berlin React meetup on 30 May 2016 (http://www.meetup.com/React-Berlin/events/231265387/)
WordPress šablony a rychlost načítání (WordCamp Praha 2017)Martin Michálek
Jak si nejprodávanější WordPress šablony stojí s rychlostí frontendu? Zjistil jsem, že to moc testovat nejde a tak kupujete zajíce v pytli. V přednášce tedy dostanete seznam nejčastějších problémů a stručný návod k jejich odstranění.
Vývoj frontendu na redakčním systému? ... aneb jak udržet pořádek v š...Martin Pešout
Pokud začínáte nový projekt, je vždy důležitou volbou správné struktování dat. Dlouhou dobu mě trápilo, že frontend vývojáři dělají řadu chyb hned na začátcích, pokud tvoří projekt nasazený radakčních systémech jako Wordpress nebo Drupal. Chtěl bych vám ukázat svůj způsob jak strukturovat frontend pro šablony, jak pracovat s gitem a hlavně jak vytvořit projekt, který s vámi bude růst a nebude se zanášet “balastem”.
During the past six months here at Wimdu, we have been working on making our front end pure, by incrementally introducing Redux, ImmutableJS, and higher-order components, all under the restrictions of a Rails application and constant requests for new features. I will share the techniques, tools, and processes we have been using along with pitfalls to avoid.
This speech was presented at Berlin React meetup on 30 May 2016 (http://www.meetup.com/React-Berlin/events/231265387/)
WordPress šablony a rychlost načítání (WordCamp Praha 2017)Martin Michálek
Jak si nejprodávanější WordPress šablony stojí s rychlostí frontendu? Zjistil jsem, že to moc testovat nejde a tak kupujete zajíce v pytli. V přednášce tedy dostanete seznam nejčastějších problémů a stručný návod k jejich odstranění.
Adam Šimek: Optimalizace skrolování, RecyclerViewmdevtalk
mDevTalk #6: 26. 1. 2017
Když se podíváte na aplikace ve vašem telefonu, tak většina obsahu je zobrazena ve skrolovatelných komponentách. Seznam zpráv, timeline na Facebooku, kontakty, poznámky, Twitter, fotky, prostě všechno. Nekonečný seznam něčeho. A není to vždy plynulé. Komplexita aplikací narůstá a skrolovaní se stále seká a seká. A programátoři se snaží a snaží. Nebo se snad nesnaží? V přednášce bych vás chtěl provést od základů toho, jak RecyclerView funguje, přes konkrétní tipy a triky a věci, kterým se vyvarovat, po poslední novinky v RecyclerView, jako je prefetch.
Miroslav Bajtoš - Nativní async/await v Node.js - už tam jsme?Develcz
Pouze dvě nová klíčová slova, a tolik nadšení! Co je async/await, proč je to v Node.js komunitě tolik očekáváno? Jak postupuje implementace a jaký je současný stav? V přednášce se dozvíte nejenom odpovědi na tyto otázky, ale taky praktické rady jestli, kdy a jak začít používat async/await už dnes.
Adam Šimek: Optimalizace skrolování, RecyclerViewmdevtalk
mDevTalk #6: 26. 1. 2017
Když se podíváte na aplikace ve vašem telefonu, tak většina obsahu je zobrazena ve skrolovatelných komponentách. Seznam zpráv, timeline na Facebooku, kontakty, poznámky, Twitter, fotky, prostě všechno. Nekonečný seznam něčeho. A není to vždy plynulé. Komplexita aplikací narůstá a skrolovaní se stále seká a seká. A programátoři se snaží a snaží. Nebo se snad nesnaží? V přednášce bych vás chtěl provést od základů toho, jak RecyclerView funguje, přes konkrétní tipy a triky a věci, kterým se vyvarovat, po poslední novinky v RecyclerView, jako je prefetch.
Miroslav Bajtoš - Nativní async/await v Node.js - už tam jsme?Develcz
Pouze dvě nová klíčová slova, a tolik nadšení! Co je async/await, proč je to v Node.js komunitě tolik očekáváno? Jak postupuje implementace a jaký je současný stav? V přednášce se dozvíte nejenom odpovědi na tyto otázky, ale taky praktické rady jestli, kdy a jak začít používat async/await už dnes.
9. Controller
Model
View
Při tvorbě UI je pro mě podstatná vrstva View
Geniální UI
Vychytané animace
Responsivní aplikace
Dotyková gesta
Použitelný design
Spokojený uživatel
10. – definice na webu Reactu
„Facebook React je knihovna pro tvorbu
uživatelských rozhraní.“
11. Výchozí data
Změny v reálném
čase
Vstupy uživatele
View
Aplikace
Data putují pouze jedním směrem.
React tím snižuje složitost kódu.
12. Výchozí data
Změny v reálném
čase
Vstupy uživatele
View
Aplikace
Staráme se o popis toho, jak má výsledek vypadat
Nová data na vstupu
přerenderovaný výsledek
13.
14. DOM (Document Object Model)
Manipulace je náročná a drahá
Svádí k ukládání stavů aplikace
Jak udržet stav elementů při přerenderování?
15. Virtuální DOM
komponenta(data 1)
= výsledek 1
komponenta(data 2)
= výsledek 2
diff(výsledek 1 - výsledek 2)
= změny
Odlehčená verze běžného DOM
29. Životní cyklus komponenty
Více na: https://facebook.github.io/react/docs/component-specs.html
componentWillReceiveProps: function(nextProps) {
},
componentWillUpdate: function(nextProps, nextState) {
if (this.props.name != nextProps.name) {
console.log('Parameter name has been changed');
}
},
componentDidUpdate: function(prevProps, prevState) {
},
Např. můžeme reagovat na vstupy nových dat: