React.js

Transcript

1. View Slide

2. #КОЙ създаде React?
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. React не е нещо младо и
   неузряло
   

   View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. View Slide

14. View Slide

15. View Slide

16. View Slide

17. Лето Божие 2015
    

    View Slide

18. #КОЙ използва React?
    

    View Slide

19. View Slide

20. Малко теория
    

    View Slide

21. Mutable (stateful) UI
    

    View Slide

22. Първоначални
    данни
    функция 1 Първоначален
    интерфейс
    

    View Slide

23. Променени
    данни
    функция 3..+inf
    Промяна на
    интерфейса
    Нови
    данни
    (сървър)
    функция 4
    

    View Slide

24. Declarative UI
    

    View Slide

25. Данни Интерфейс
    функция 2
    UI
    декларация
    Нови
    данни
    (сървър)
    

    View Slide

26. 
    
    {beer.brand} - {beer.likes}
    
    
    

    View Slide

27. Immutable UI
    

    View Slide

28. Данни
    функция 1
    Интерфейс
    функция 2
    Нови
    данни
    (сървър)
    

    View Slide

29. function render(beers) {
    return '' + beers.map(render_beer) + '';
    }
    function render_beer(beer) {
    return '' +
    beer.brand + ' ' + beer.likes +
    ';
    }
    

    View Slide

30. Immutable != Declarative
    

    View Slide

31. React
    

    View Slide

32. View Slide

33. React
    

    View Slide

34. A JavaScript library for building
    user interfaces
    

    View Slide

35. Getting started
    
    
    

    View Slide

36. Hello World
    

    View Slide

37. JSX
    • Синтактичен трансформатор
    • Вграден ECMAScript 6 transpiler (с опция --harmony)
    • Client-side & Server-side поддръжка
    

    View Slide

38. JSX
    children
     React.createElement(Component, {
    a1: code,
    a2: "str"
    }, children);
    

    View Slide

39. JSX
    var Component = React.createClass({ … });
     var Component = React.createClass({
    displayName: "Component",
    …
    });
    

    View Slide

40. Virtual DOM
    

    View Slide

41. Virtual DOM
    • Структура от данни, скриваща мутациите върху DOM
    елементите
    • Представлява йерархия от обекти
    • Симулира immutable UI
    • Бърз алгоритъм за намиране на разлики
    

    View Slide

42. Алгоритъм
    

    View Slide

43. Алгоритъм
    var oldDOM = rootComponent.getCurrentVirtualDOMObject(),
    newDOM = rootComponent.render();
    React.applyDifferences(oldDOM, newDOM);
    

    View Slide

44. body {
    header(className="menu") {
    ul {
    li(href=…) { начало },
    li(href=…) { вход },
    li(href=…) { регистрация }
    },
    },
    div(className="users") {
    h1 { Пешо }
    h1 { Гошо }
    },
    footer { Copyright 2015 ® }
    }
    IndexPage {
    NavigationMenu,
    IndexPageContent {
    UserList
    },
    Footer
    }
    render
    Йерархия от React
    компоненти
    VirtualDOM
    

    View Slide

45. div(className="test") {
    h1 {
    Здравей!
    }
    h2 {
    Тук си от 1234 милисекунди!
    }
    }
    HelloWorld {
    state: {
    initialTime: [Date Object],
    time: [Date Object]
    },
    render() {
    ...
    }
    }
    render
    React компонент VirtualDOM елемент
    

    View Slide

46. div(className="test") {
    h1 {
    Здравей!
    }
    h2 {
    Тук си от 1234 милисекунди!
    }
    }
    render
    VirtualDOM елемент Browser DOM
    
    Здравей!
    Тук си от 1234 милисекунди!
    
    

    View Slide

47. div(className="test") {
    h1 {
    Здравей!
    }
    h2 {
    Тук си от 1234 милисекунди!
    }
    }
    diff
    Стар виртуален DOM Нов виртуален DOM
    div(className="test") {
    h1 {
    Здравей!
    }
    h2 {
    Тук си от 1222 милисекунди!
    }
    }
    

    View Slide

48. div(className="test") {
    h1 {
    Здравей!
    }
    h2 {
    Тук си от 1234 милисекунди!
    }
    }
    Разлики Променен HTML
    
    Здравей!
    Тук си от 1234 милисекунди!
    
    apply diff
    
    Здравей!
    Тук си от 1222 милисекунди!
    
    

    View Slide

49. Заради Virtual DOM...
    Може да се рендерира не само HTML:
    • React Native
    • React Canvas
    • React QT*
    • React GTK*
    • React WPF*
    

    View Slide

50. React Native sneak peek
    var App = React.createClass({
    render: function() {
    return (
    
    
    
    
    
    );
    }
    });
    

    View Slide

51. Server-side rendering
    DEAL WITH IT
    

    View Slide

52. Data flow
    

    View Slide

53. Компонент
    props
    state
    Родител
    state
    Компонент state
    Компонент state
    

    View Slide

54. Props
    render() {
    return online={true}
    position={
    Senior dog specialist
    }
    onSelect={function() { ... }} />
    }
    

    View Slide

55. Props
    render() {
    return (
    
    
    {this.props.name}
    {this.props.online && online}
    
    {this.props.position}
    
    );
    }
    

    View Slide

56. Prop Validation
    User.propTypes = {
    name: React.PropTypes.string.isRequired,
    online: React.PropTypes.bool,
    position: React.PropTypes.element,
    onSelect: React.PropTypes.func.isRequired
    };
    

    View Slide

57. Prop Defaults
    User.defaultProps = {
    online: false,
    position: unknown
    };
    

    View Slide

58. Properties
    • Immutable
    • Може да се подменят само от родител
    • При подмяна се пререндерира
    • componentWillReceiveProps, …
    • Може да са всякакви JS обекти
    • Може да се валидират
    

    View Slide

59. State
    • Вътрешно състояние за компонент
    • Може да се променя и чете само отвътре
    • При промяна се пререндерира
    • componentWillUpdate, componentDidUpdate
    • Отново, може да съдържа всичко
    • Променя се само чрез `setState`
    

    View Slide

60. Events
    • Custom event система – "оправя" разлики в браузърите
    • Clipboard, Keyboard, Mouse, Touch, Focus, Form, Scroll &
    Wheel
    • Закачат се като property-та на елементите
    

    View Slide

61. Events
    render() {
    return (
    
    Why do you want to destroy the world?
    } />
    
    Launch nukes
    
    
    );
    }
    

    View Slide

62. Data loading
    • componentDidMount
    • componentWillReceiveProps
    

    View Slide

63. Data loading
    componentDidMount() {
    ajax('user/all', function(users) {
    this.setState({users: users});
    }.bind(this));
    }
    

    View Slide

64. Events
    componentDidMount() {
    ajax('user/all', (users) => {
    this.setState({users: users});
    });
    }
    

    View Slide

65. References
    class SearchForm extends React.Component {
    clear() {
    this.setState({text: ''});
    }
    ...
    }
    

    View Slide

66. References
    render() {
    onSearch={...} />
    
    }
    clear() {
    this.refs.searchForm.clear();
    }
    

    View Slide

67. Демота
    

    View Slide

68. Обобщение
    

    View Slide

69. JSX – синтаксис за вграждане на
    HTML-о-подобни тагове в JS
    

    View Slide

70. Virtual DOM – структурата, която
    моделира HTML елементите
    

    View Slide

71. Data flow – events, props, states
    

    View Slide

72. Възможност за други
    имплементации (React Native) и
    Server-side rendering
    

    View Slide

73. Добра енкапсулация
    

    View Slide

74. Бърза разработка
    

    View Slide

75. Лесно unit тестване
    (без браузър)
    

    View Slide

76. View Slide