Slides for my talk about React at the Vývojařská Plzeň developers meetup.

1. #vyvojarskaplzen

3. Why React?

4. $ whoami
Viliam Elischer
SW Engineer at ZOOM International
twitter.com/vireliam
github.com/vire

5. Background
Reasons
Motivators
Terminology
Caveats
Next
Q&A
Agenda

6. Background

7. React is a OSS JavaScript library designed for
easier user interfaces development.

8. Maintained by Facebook and Instagram
Started around May 2013
Contributors
Pete Hunt, Cheng Lou, Sebastian Markbåge, Christopher Chedeau
+ aprox. 565 other individuals

9. Reasons why React succeeded

11. How we got here?

13. M V C

14. Focus on one important problem

16. DOM manipulation is expensive
Render & re-render drops perf

17. Application architecture in traditional frameworks

18. Two-way data-binding

19. n12v.com/2-way-data-binding/

20. Cascading updates
change of A triggers change of B
change of B triggers change of C

21. Global mutable state is the root of all…
initialVolume, currentVolume, previousVolume

22. Complex and Complicated

23. Vendor lock

24. Templating engines lack of expressivity
($ng-repeat, Handlebars)

25. Code reuse

26. React is not

27. a framework
but it’s often presented or treated like one

28. a silver bullet
“My users hate me because the UX sux but,
I hope React will solve this problem for me.”

29. a FIX
for wrong architectural decisions
for poor code-base status
wrong inefficient company || development processes

31. a hype anymore*

32. suffixed with .js
like other projects e.g. ember.js
npm ERR! 404 Registry returned 404 for GET on https://registry.npmjs.org/react.js

33. Motivators
- or -
reasons why people should consider React

34. small and concise public API
means easy and quick to learn

35. enforces data-down approach

36. composition and code reuse made simple
-
with the help of components!

37. cross-platform (iOS, Android)

38. unit-tests on component level

39. Community
people, communication, conferences, resources, help

40. significantly smaller vendor lock

41. hiring of new developers

42. Terminology

43. ReactElement
is a light, stateless, immutable, virtual representation of a
DOM Element. It is a virtual DOM.

44. ReactNode
ReactElement || string (aka ReactText) || number (aka
ReactText) || Array of ReactNodes (aka ReactFragment)

45. ReactComponent Class
is simply just a ES6 class (or "constructor function").
When this constructor is invoked it is expected to return an
object with at least a render method on it.

46. Component - example
class MyComponent extends React.Component {
constructor() {
super();
this.state = {msg: 'Hello world!'}
}
render() {
return <div>{this.state.msg}</div>
}
}
React.render(<MyComponent/>, document.querySelector("#app"));

47. JSX
is a XML-like syntax extension to ECMAScript
“JSX is markup in code and not code in markup like in PHP”
- my colleague Luděk -

48. You can use React without JSX
const child1 = React.createElement('li', null, 'First Text Content');
const child2 = React.createElement('li', null, 'Second Text Content');
const root = React.createElement('ul', { className: 'my-list' }, child1, child2);
ReactDOM.render(root, document.getElementById('example'));

49. Pure component
“render function is "pure" when it renders the same result
given the same props and state”

50. “Virtual DOM is to enable UI as a pure function of state.”
André Staltz

51. Dumb and smart (higher-order) components

52. Year 2015 in the JavaScript community

53. Paradigm shift triggers

54. Unidirectional, immutable, declarative
Functional influence (Om, DataScript, Atoms)
Transpiling ~ Babel ES6/ES2015 + Linting (code style quality)
Framework -> Devstack (set of libraries)
Hot Module Reload -> Time travel -> Redux -> Webpack
Ember.js and AngularJS ~ lack of vision and agility, slow change adaption

55. Use cases

56. Proof of concepts || rapid prototyping
SPA
real-time communication
frequent data model changes as cause for re-render - dashboard || d3
enterprise requirements (internet banking, CRM, ERP)
lot code reuse required?
Mobile applications - React Native
on-demand javascript update without app-store re-approval
Tools
Monitoring - queue, logs, kibana-like

57. Caveats

58. VTree architecture is not REST friendly
Business logic in components
Side effects
Documentation -> devdocs.io
Changes will happen (current version is 0.14.3)
For new people lack of best practices ~ many opinions

59. Alternatives

60. Matt-Esch/virtual-dom
google/incremental-dom
tildeio/glimmer

61. Comparison

62. App1
App2

63. Next steps

64. Flux | Redux | Flux-like implementation
Relay + GraphQL | Falcor
CSS Modules
Isomorphic

65. Q & A

66. Thank you
@vireliam