Component based Frontend architecture with React.JS

The talk will start with a short introduction on ReactJS and its basic concepts and then it will highlight the benefits a component based architecture gives you.

Transcript

1. Component based Frontend architecture with React.JS @BastianHofmann
2. Application architecture
3. Code and component
   re-use
4. Rapid Development
5. Handling large code-bases
6. With React.js
7. With small and independent components
8. webserver HTML browser JS controller
9. webserver HTML browser JS Ajax controller
10. webserver HTML browser JS Ajax controller
11. de duplication ode duplication code duplication code duplication code duplication code duplication code duplication code duplication code duplication code duplication code duplication code duplication code duplication code duplicatio code duplicat code duplic code dup code du code cod co co
12. A few words about me
15. http://speakerdeck.com/u/bastianhofmann
16. Application architecture
18. status quo
19. webserver loadbalancer pgsql memcached mongodb services
20. webserver
21. webserver HTML browser JS Ajax controller
22. Duplication and only some Code re- use
23. We can do
    better
24. Small components over big controllers
32. Self contained
33. Can be used everywhere
34. JS is part of the component
35. CSS can be part of the component
36. http://facebook.github.io/react/
37. JavaScript UI Library
38. Many small, self contained, reusable components
39. var HelloMessage = React.createClass(
 {
 render: function () {
 return <div>Hello {this.props.name}</div>;
 }
 }
 );
 
 ReactDOM.render(<HelloMessage name="John" />, mountNode);
40. var Timer = React.createClass({
 getInitialState: function () {
 return {secs: 0};
 },
 tick: function () {
 this.setState({secs: this.state.secs + 1});
 },
 componentDidMount: function () {
 this.interval = setInterval(this.tick, 1000);
 },
 componentWillUnmount: function () {
 clearInterval(this.interval);
 },
 render: function () {
 return (<div> Seconds Elapsed: {this.state.secs}</div> );
 }
 });
 
 ReactDOM.render(<Timer />, mountNode);
41. var TodoList = React.createClass(
 {
 render: function () {
 var createItem = function (itemText) {
 return <li>{itemText}</li>;
 };
 return ( <ul> {this.props.items.map(createItem)} </ul> );
 }
 }
 );
42. var TodoApp = React.createClass({
 render: function () {
 return (
 <div>
 <h3>TODO</h3>
 <TodoList items={this.props.items} />
 </div>
 );
 }
 });
43. var Timer = React.createClass({
 getInitialState: function () {
 return {secs: 0};
 },
 tick: function () {
 this.setState({secs: this.state.secs + 1});
 },
 componentDidMount: function () {
 this.interval = setInterval(this.tick, 1000);
 },
 componentWillUnmount: function () {
 clearInterval(this.interval);
 },
 render: function () {
 return (<div> Seconds Elapsed: {this.state.secs}</div> );
 }
 });
 
 ReactDOM.render(<Timer />, mountNode);
44. Getting the data in there
45. PHP Backend JSON React Frontend
46. PHP Backend JSON React Frontend
47. PHP Backend JSON React Frontend
48. var TodoApp = React.createClass({
 getInitialState: function () {
 return {items: […]};
 },
 render: function () {
 return (
 <div>
 <h3>TODO</h3>
 <TodoList items={this.state.items} />
 </div>
 );
 }
 });
49. PHP Backend JSON React Frontend
50. Problematic
51. Remember
52. Self-contained
53. Reusable
54. PHP Backend JSON React Frontend
55. PHP Backend JSON React Frontend
56. PHP Backend JSON React Frontend
57. PHP Backend JSON React Frontend
58. Overfetching
59. Underfetching
60. Solutions
61. GraphQL http://graphql.org/
62. PHP Backend React Frontend GraphQL
63. Request Cache
64. Batching
65. Multi-GET
66. Futures
67. Server side rendering
68. SEO
69. Better user experience
70. Several approaches
71. NodeJS service
72. Request HTML nodeJS service PHP process Data JSON Rendered HTML string React
73. Component based architecture
74. Benefits
75. Easy re-using of components
76. Enables developers to only focus on their components
77. Rapid prototyping
78. Easier Refactoring
79. Error Handling
80. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Menu Institution
81. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Menu EXCEPTION Institution
82. Profile Publications Publication Publication Publication LeftColumn Image Menu Institution
83. Experiments (A/B Testing)
84. Partial roll outs
85. Load components asynchronously
86. Conclusion?
87. Think about your architecture
88. Small reusable components are great
89. Refactor and make it better continuously
90. Frontend and backend are part of the same application
91. Don't rewrite your whole codebase in one go
92. http://twitter.com/BastianHofmann http://lanyrd.com/people/BastianHofmann http://speakerdeck.com/u/bastianhofmann mail@bastianhofmann.de