Hello World 2018 - We need to talk about Preact

Transcript

1. WE NEED TO TALK ABOUT PREACT
2. HELLO! I am Sara I work at YLD and make useless stuff on the internet @NikkitaFTW
3. Portugal
4. REMEMBER THIS JOKE?
5. Y’ALL JUST LOST TO A TEAM OF FLAMINGOS
6. PREACT
7. I know what your first question is !
8. I brought them stickers
9. 1. What ? 2. Who ? 3. Why ? 4. Future ? 5. The CLI
10. WHAT IS PREACT ?
12. IS IT PRODUCTION READY ?
14. YES !
15. WHO MADE PREACT ?
16. Jason Miller / @developit
17. WHY PREACT ?
18. THE COMMUNITY There is an amazing community behind preact !
24. IT’S PERFORMANT Preact is 3KB and was made with performance in mind
25. X KB OF JS IS NOT THE SAME AS X KB OF IMAGES The browser has to download it but also parse it and in older devices this may be the biggest problem
26. BENCHMARKS
27. Firefox 57.0 (64-bit)
28. Chrome Version 62 (64-bit)
29. REACT COMPATIBILITY You can use it with any react component
30. yarn add preact-compat { // ... resolve: { alias: { 'react': 'preact-compat', 'react-dom': 'preact-compat', // Not necessary unless you consume a module using `createClass` 'create-react-class': 'preact-compat/lib/create-react-class' } } // ... } How ?
31. What’s included in Preact ?
32. ES6 CLASS COMPONENTS And all the awesome lifecycle methods of course
33. HIGH ORDER COMPONENTS Create them composes
34. FUNCTIONAL COMPONENTS Functions that just receive props as arguments and return JSX/VDOM
35. CONTEXT In some cases, you want to pass data through the component tree without having to pass the props down manually at every level. You can do this directly in with the “context” API.
36. REFS We all use it, don’t lie
37. VIRTUAL DOM DIFFING Preact's diff is simple but effective, and extremely fast.
38. What’s added in Preact ?
39. PROPS AND STATE IN RENDER this.props and this.state are passed to render() for you. THIS IS SO SWEET
40. class Home extends Component { constructor() { super(); this.state = { loading: true } } render = () => { const { name } = this.props; const { loading } = this.state; return ( <div> {loading ? ‘Loading...’ : name} </div> ) } }
41. class Home extends Component { state = { loading: true } render = ({ name }, { loading }) => ( <div> {loading ? ‘Loading...’ : name} </div> ) }
42. DOM UPDATES Batching of DOM updates, debounced/collated using setTimeout (can also use requestAnimationFrame)
43. CSS CLASS You can just use class for CSS classes. className is still supported, but class is preferred.
44. Component and element recycling / pooling.
45. What’s missing in Preact ?
46. DANGEROUSLY SET innerHTML Do we really want this ? There is preact-markup to fill this gap
47. SYNTHETIC EVENTS Preact's browser support target does not require this extra overhead. Preact uses the browser's native addEventListener for event handling
48. BROWSER SUPPORT Preact supports modern browsers (Chrome, Firefox, Safari, Edge) and IE9+
49. FUTURE
50. FASTER DIFFING ALGORITHM
51. ARRAY RETURNS
52. FRAGMENT SUPPORT
53. ASYNC DIFFING
54. DEMO TIME Let’s talk about the preact-cli
55. THANK YOU