Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

React z pohledu UI vývojáře

1,153 views

Published on

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.

Published in: Software
  • Be the first to comment

React z pohledu UI vývojáře

  1. 1. React z pohledu UI vývojáře Martin Pešout www.martinpesout.cz @martinpesout
  2. 2. 8x nárůst za poslední mezi roky 2014-2015
  3. 3. Jak strukturovat 
 Javascriptové aplikace?
  4. 4. AngularJS Dart Ember.js Backbone.js Meteor.js
  5. 5. AngularJS DartPureMVC Ember.js Backbone.js Closure Meteor.js Agility.js Aria Templates Bolt CanJS KnockoutJS Skel YUI
  6. 6. Controller Model View Frameworky pracují složitě s modelem API pro čtení dat API pro zápis dat Ukládání dat Data Data Data Data Data
  7. 7. 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
  8. 8. – definice na webu Reactu „Facebook React je knihovna pro tvorbu uživatelských rozhraní.“
  9. 9. 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.
  10. 10. 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
  11. 11. 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í?
  12. 12. 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
  13. 13. Univerzálnější využití React React DOM již není součástí samotného Reactu od verze 0.14 React CanvasReact DOM React Three React Native
  14. 14. – definice na webu Reactu „React je celý o tvorbě použitelných komponent. Ve skutečnosti jediná věc, kterou s Reactem děláte, je tvorba komponent.“
  15. 15. Funkcionální přístup Nemáme předem dané jak získáváme data Vnitřní stavy Parametr A Parametr B Předpis
  16. 16. var Component = React.createClass({ }); Povinná render metoda
  17. 17. var Component = React.createClass({ render: function() { return předpis_výsledku; } }); Povinná render metoda
  18. 18. var Component = React.createClass({ render: function() { return předpis_výsledku; } }); Povinná render metoda Javascript
  19. 19. Jazyk JSX Krok navíc, který přidává XML syntax do Javascriptu. render: function render() { return React.createElement( "div", null, "Hello ", this.props.name ); } render: function() { return <div>Hello {this.props.name}</div>; } JSX
  20. 20. var LoginPage = React.createClass({ render: function() { return ( <div className="grid"> <div className="sidebar"> <MainNavigation /> </div> <div className=“content"> <LoginForm /> </div> </form> ); }, }); var MainNavigation = React.createClass({ render: function() { return ( <ul className="main-navigation"> <li><a href="#">Homepage</a></li> <li><a href="#">Contact info</a></li> </ul> ); }, });
  21. 21. var HelloMessage = React.createClass({ render: function() { } }); ReactDOM.render(<HelloMessage name="John" />, document.body); name="John" <div>Hello John</div> <HelloMessage /> Žádný stav
  22. 22. var HelloMessage = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; } }); ReactDOM.render(<HelloMessage name="John" />, document.body); name="John" <div>Hello John</div> <HelloMessage /> Žádný stav
  23. 23. var Menu = React.createClass({ getInitialState: function() { return { open: false, }; }, _toggleMenu: function() { this.setState({ open: this.state.open ? false : true, }); }, render: function() { var componentClasses = classNames({ 'main-nav': true, 'main-nav--open': this.state.open, }); return ( <div className={componentClass} onClick={this._toggleMenu}> TODO položky navigace... </div> ); }, }); <div class="menu">…</div> <Menu /> Stav: open
  24. 24. Ž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:
  25. 25. var LoginForm = React.createClass({ componentDidMount: function() { this.refs.loginInput.getDOMNode().focus(); }, render: function() { return ( <form className="auth-form"> <div className="auth-form__row"> <label htmlFor="email">Email address</label> <input type="email" id="email" ref="loginInput" /> </div> </form> ); }, });
  26. 26. Skutečné triky, které ocení nejen UI vývojáři
  27. 27. A B C
  28. 28. A B C Navigace
  29. 29. B C Navigace
  30. 30. C Navigace
  31. 31. C Navigace <ul class="tabs"> <li><a href="#">Section A</a></li> <li><a href="#">Section B</a></li> <li><a href="#">Section C</a></li> </ul>
  32. 32. A B C @media only screen and (min-width: 64em) { .tabs { display: none; } } <ul class="tabs"> <li><a href="#">Section A</a></li> <li><a href="#">Section B</a></li> <li><a href="#">Section C</a></li> </ul>
  33. 33. function getViewport() { return $(window).width() < 640 ? 'mobile' : 'large'; } var MainLayout = React.createClass({ getInitialState: function() { return { viewport: getViewport(), }; }, pokračování komponenty . . .
  34. 34. _resize: function() { this.setState({ viewport: getViewport(), }); }, componentDidMount: function() { $(window).on('resize.content', this._resize); }, componentWillUnmount: function() { $(window).unbind('.content'); }, pokračování . . .
  35. 35. render: function() { var content; if (this.state.viewport == 'mobile') { content = ( <ul class="tabs"> <li><a href="#">Section A</a></li> <li><a href="#">Section B</a></li> <li><a href="#">Section C</a></li> </ul> <div> Zobrazení na mobilu </div> ); } else { content = ( <div className="grid">Zobrazení na desktopu</div> ) } return content; } }); Mobilní navigace
  36. 36. A B C Nadpis stránky
  37. 37. A B C Nadpis stránky
  38. 38. A B C Navigace Nadpis stránky
  39. 39. Živá ukázka
  40. 40. Děkuji za pozornost Martin Pešout www.martinpesout.cz @martinpesout

×