What is Glimmer.js?
Glimmer.js vs Ember.js
TypeScript
Web Components
Demos
MAKE THE INTERNET GREAT AGAIN
Tonight’s Agenda
Slide 4
Slide 4 text
“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
Slide 5
Slide 5 text
Ember’s rendering engine (Glimmer)
extracted to standalone library
WHAT IS GLIMMER.JS?
Slide 6
Slide 6 text
Fast, light-weight JS library for building
UI components
WHAT IS GLIMMER.JS?
Slide 7
Slide 7 text
HOW FAST?
http://yehudakatz.com/2017/04/05/the-glimmer-vm-boots-fast-and-stays-fast/
Slide 8
Slide 8 text
HOW FAST?
http://yehudakatz.com/2017/04/05/the-glimmer-vm-boots-fast-and-stays-fast/
Slide 9
Slide 9 text
HOW SMALL?
https://emberjs.com/blog/2017/04/05/emberconf-2017-state-of-the-union.html#toc_file-size
Hello World
minified + gzipped
Slide 10
Slide 10 text
“You have to think anyway, so why not think big?”
- Donald J. Trump
Slide 11
Slide 11 text
Conventions (Ember CLI)
Components (basically everything)
Separation of HTML + JS
Handlebars template language
MAKE THE INTERNET GREAT AGAIN
What it borrows from Ember
Slide 12
Slide 12 text
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
Slide 13
Slide 13 text
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
Slide 14
Slide 14 text
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
Slide 15
Slide 15 text
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
Slide 16
Slide 16 text
Encapsulates templates, logic, state
Does not encapsulate CSS
Easy to test
More in a bit…
MAKE THE INTERNET GREAT AGAIN
Components
Slide 17
Slide 17 text
“Do you mind if I sit back a little?
Because your breath is very bad.”
- Donald J. Trump
Slide 18
Slide 18 text
No .get() or .set()
No “actions” - everything is a function
vs {{component-tags}}
TypeScript
Web components
MAKE THE INTERNET GREAT AGAIN
What’s different?
Slide 19
Slide 19 text
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'
Slide 20
Slide 20 text
MAKE THE INTERNET GREAT AGAIN
export default Ember.Component.extend({
actions: {
logIt() {
console.log("Clicked!");
}
}
});
Log It
Slide 21
Slide 21 text
MAKE THE INTERNET GREAT AGAIN
{{ugh-component}}
vs
Slide 22
Slide 22 text
MAKE THE INTERNET GREAT AGAIN
TypeScript
JavaScript superset (JS + typechecking)
Transpiles to JS
Default language of Glimmer
Glimmer written in TypeScript
Slide 23
Slide 23 text
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
Slide 24
Slide 24 text
“No dream is too big. No challenge is too great. Nothing
we want for our future is beyond our reach.”
- Donald J. Trump
Slide 25
Slide 25 text
MAKE THE INTERNET GREAT AGAIN
What is the future of Glimmer?
Ember
Glimmer
“npm install your way to ember”
Slide 26
Slide 26 text
MAKE THE INTERNET GREAT AGAIN
What Glimmer needs
Less hype
Better documentation (surprise!)
More example use cases
Roadmap
Slide 27
Slide 27 text
GLIMMER TIME
Slide 28
Slide 28 text
Application structure
Working with Glimmer components
Data bindings
Helpers
MAKE THE INTERNET GREAT AGAIN
Demo