lifeart/glimmerx-workshop

GlimmerX workshop repo from HolyJS 2021 Conf, include demo, video links and usecases

GlimmerX Workshop

This is full featured SPA application created using GlimmerX library.

You can use it to explore possibilities of GlimmerVM outside of Ember.js ecosystem.

Repo includes:

• State managment examples
• Lazy component loading patterns
• GraphQL Apollo integraion
• Routing
• Server Side rendering and rehydration
• Tests
• Storybook integraion
• Typed templates

Prerequisites

You will need the following things properly installed on your computer.

1. Ensure you have registered github account.
2. Ensure you have VSCode installed
3. Ensure you have NodeJS 16.13.0 installed, if not - install volta
4. Ensure you have Yarn 1.22.17 installed, if not - install volta
5. Install GitHub GraphQL Explorer to your github profile
6. Visit github.com/settings/tokens and generate empty token (without checkboxes), name may be: glimmerx-workshop;

Workshop Video [RU]

Part 1	Part 2

---

Installation

• git clone https://github.com/lifeart/glimmerx-workshop
• cd glimmerx-workshop
• yarn

Running / Development

• yarn vite -> pure app (no ssr)
• yarn dev -> app + SSR
• Visit your app at http://localhost:3000.

Running Tests

• yarn test

Running Storybook

• yarn storybook

---

Further Reading / Useful Links

1. What Is Reactivity?
2. What Makes a Good Reactive System?
3. How Autotracking Works
4. Autotracking: Elegant DX Via Cutting-Edge CS
5. @use and Resources RFC
6. Autotracking Simplified example

RFC's

1. Merged
2. Active

Videos

1. Glimmer 2 Deep Dive with Yehuda Katz
2. ReactiveConf 2017 - Tom Dale: Secrets of the Glimmer VM
3. Virtual EmberConf 2020: Autotracking: Reactivity and State in Modern Ember by Chris Garrett

@tracked builtins

• github.com/tracked-tools/tracked-built-ins
• github.com/tracked-tools/tracked-maps-and-sets
• github.com/tracked-tools/tracked-toolbox

Issues created

1. vitejs/vite#5364
2. glimmerjs/glimmer-vm#1359
3. glimmerjs/glimmer.js#365
4. typed-ember/glint#224
5. typed-ember/glint#223
6. josemarluedke/glimmer-apollo#45
7. josemarluedke/glimmer-apollo#48
8. josemarluedke/glimmer-apollo#49
9. josemarluedke/glimmer-apollo#50

PR's created

1. storybookjs/builder-vite#136

Repos created

• https://github.com/lifeart/tiny-router
• https://github.com/lifeart/vite-plugin-glimmerx

Deps

• https://vitejs.dev/
• https://tailwindcss.com/
• https://glimmer-apollo.com/
• https://jestjs.io/
• https://storybook.js.org/
• https://github.com/glimmerjs/glimmer-experimental/
• https://github.com/lifeart/tiny-router
• https://github.com/typed-ember/glint

Ember Courses & books

• https://guides.emberjs.com/release/getting-started/
• https://frontendmasters.com/courses/ember-octane/
• https://balinterdi.com/rock-and-roll-with-emberjs/