Slide 1

Slide 1 text

with Glimmer.js Peter Brown - June 5, 2017

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

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

Slide 29

Slide 29 text

No content