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,225 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
  • ★★ How Long Does She Want You to Last? ★★ A recent study proved that the average man lasts just 2-5 minutes in bed (during intercourse). The study also showed that many women need at least 7-10 minutes of intercourse to reach "The Big O" - and, worse still... 30% of women never get there during intercourse. Clearly, most men are NOT fulfilling there women's needs in bed. Now, as I've said many times - how long you can last is no guarantee of being a GREAT LOVER. But, not being able to last 20, 30 minutes or more, is definitely a sign that you're not going to "set your woman's world on fire" between the sheets. Question is: "What can you do to last longer?" Well, one of the best recommendations I can give you today is to read THIS report. In it, you'll discover a detailed guide to an Ancient Taoist Thrusting Technique that can help any man to last much longer in bed. I can vouch 100% for the technique because my husband has been using it for years :) Here's the link to the report ▲▲▲ https://tinyurl.com/rockhardxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×