Make the Internet Great Again with Glimmer.js

Introductory presentation on Glimmer.js given at BTVJS meetup. Demo code is https://github.com/AgilionApps/btvjs-glimmer-demo

Transcript

1. with Glimmer.js Peter Brown - June 5, 2017
3. What is Glimmer.js? Glimmer.js vs Ember.js TypeScript Web Components Demos MAKE THE INTERNET GREAT AGAIN Tonight’s Agenda
4. “I have so many websites. I have them all over the place. I hire people, they do a website. It costs me $3.”
 
 - Donald J. Trump
5. Ember’s rendering engine (Glimmer) extracted to standalone library WHAT IS GLIMMER.JS?
6. Fast, light-weight JS library for building UI components WHAT IS GLIMMER.JS?
7. HOW FAST? http://yehudakatz.com/2017/04/05/the-glimmer-vm-boots-fast-and-stays-fast/
8. HOW FAST? http://yehudakatz.com/2017/04/05/the-glimmer-vm-boots-fast-and-stays-fast/
9. HOW SMALL? https://emberjs.com/blog/2017/04/05/emberconf-2017-state-of-the-union.html#toc_file-size Hello World
 minified + gzipped
10. “You have to think anyway, so why not think big?”
 
 - Donald J. Trump
11. Conventions (Ember CLI) Components (basically everything) Separation of HTML + JS Handlebars template language MAKE THE INTERNET GREAT AGAIN What it borrows from Ember
12. Web server (ember serve) Build tool (ember build, different environments) Generators (ember generate) Package management (ember install) Test runner (ember test) MAKE THE INTERNET GREAT AGAIN Ember CLI
13. MAKE THE INTERNET GREAT AGAIN $ ember serve Livereload server on http://localhost:49153 Build successful (6362ms) – Serving on http://localhost:4200/ Slowest Nodes (totalTime => 5% ) | Total (avg) ----------------------------------------------+--------------------- RollupWithDependencies (1) | 4799ms TypeScript (1) | 1434ms
14. MAKE THE INTERNET GREAT AGAIN $ ember build ⠇ Building cleaning up... Built project successfully. Stored in “dist/". $ tree dist dist ├── app.css ├── app.js ├── app.js.map ├── index.html └── robots.txt
15. MAKE THE INTERNET GREAT AGAIN $ ember generate glimmer-component x-thing installing glimmer-component create src/ui/components/x-thing/component.ts create src/ui/components/x-thing/template.hbs
16. Encapsulates templates, logic, state Does not encapsulate CSS Easy to test More in a bit… MAKE THE INTERNET GREAT AGAIN Components
17. “Do you mind if I sit back a little?
 Because your breath is very bad.”
 
 - Donald J. Trump
18. No .get() or .set() No “actions” - everything is a function <html-tags> vs {{component-tags}} TypeScript Web components MAKE THE INTERNET GREAT AGAIN What’s different?
19. MAKE THE INTERNET GREAT AGAIN const Person = Ember.Object.extend({ name: 'Peter Brown' }); let person = Person.create(); person.get('name'); // 'Peter Brown' person.set('name', 'Donald Trump'); person.get('name'); // 'Donald Trump'
20. MAKE THE INTERNET GREAT AGAIN export default Ember.Component.extend({ actions: { logIt() { console.log("Clicked!"); } } }); <ul> <li {{action="logIt"}}>Log It</li> </ul>
21. MAKE THE INTERNET GREAT AGAIN {{ugh-component}} vs <omg-component />
22. MAKE THE INTERNET GREAT AGAIN TypeScript JavaScript superset (JS + typechecking) Transpiles to JS Default language of Glimmer Glimmer written in TypeScript
23. MAKE THE INTERNET GREAT AGAIN Web Components Custom, reusable, encapsulated HTML tags (sound familiar?) Based on web standards (custom elements, shadow DOM, etc) webcomponents.org
24. “No dream is too big. No challenge is too great. Nothing we want for our future is beyond our reach.”
 
 - Donald J. Trump
25. MAKE THE INTERNET GREAT AGAIN What is the future of Glimmer? Ember Glimmer “npm install your way to ember”
26. MAKE THE INTERNET GREAT AGAIN What Glimmer needs Less hype Better documentation (surprise!) More example use cases Roadmap
27. GLIMMER TIME
28. Application structure Working with Glimmer components Data bindings Helpers MAKE THE INTERNET GREAT AGAIN Demo