Fiber or Glimmer?

Given at CodeMash 2018

Transcript

1. FIBER OR GLIMMER?
2. TOMMY GRAVES MEET ME Twitter: @TAGraves GitHub: https://github.com/tagraves Root Insurance: https://joinroot.com
3. REACT & EMBER Focuses / Commitments Goals for Fiber / Glimmer The Future
4. Focuses / Commitments
5. REACT’S COMMITMENTS 1. JavaScript only 2. Do one thing
6. EMBER’S COMMITMENTS 1. Use the best tool for the job 2. Be everything, be opinionated
7. Goals for Fiber / Glimmer
8. GOAL #1 ENABLE DEVELOPMENT OF NEW FEATURES FIBER’S GOALS Fragments Error Boundaries Portals Context
9. render() { return ( <> <div /> <div /> </> ); } render() { return [ <li key=“A”>A</li>, <li key=“B”>B</li>, ]; } render() { return ‘Just a string!’; } render() { return null; } FRAGMENTS
10. render() { return ReactDOM.createPortal( <div id=“A” />, document.getElementById(‘X’), ); } PORTALS
11. componentDidCatch(errorMessage, errorInfo) { this.setState({ error: errorMessage, }); } ERROR BOUNDARIES
12. GOAL #2 ENABLE REACT ASYNC FIBER’S GOALS
13. STACK
14. FIBER
15. STACK
16. FIBER
17. STACK FIBER Recursive Iterative Uses the stack Uses linked lists Synchronous Asynchronous Blocking Non-Blocking
18. GOAL #1 SPLIT THE EMBER RENDERING ENGINE OUT FROM THE REST OF EMBER GLIMMER’S GOALS
19. GOAL #2 IMPLEMENT A VM FOR EFFICIENT AND LIGHTWEIGHT RENDERING GLIMMER’S GOALS
20. <div>Hello World!</div> {}
21. <div> Hello {{conference}}! </div> { “conference”: “CodeMash” }
22. <div class=“days”> {{#each days key="id" as |day|}} {{day.name}} <hr /> {{/each}} </div> { “days”: [ { “name”: “Thursday”, “id”: 1 }, { “name”: “Friday”, “id”: 2 } ] }
23. The Future?
24. THANK YOU!