tutorial todos
NullVoxPopuli opened this issue · comments
How to do Polling with a resource:
import { resourceFactory, resource } from 'ember-resources';
class State {
// this part I don't know, and is specific to your use case
@tracked foo;
@tracked bar;
}
const Status = resourceFactory((pollingInternal = 10_000) => {
return resource(({ on }) => {
let state = new State();
async function getStatus() {
// make your request here
state.foo = "foo";
}
let interval = setInterval(getStatus, pollingInterval);
on.cleanup(() => clearInterval(interval));
return state;
});
});
and then in a component or something:
or in js
class {
@use status = Status;
get foo() {
return this.status.foo;
}
}
Wait for composition to be more widely supported in ember-resources?
const Status = resourceFactory((pollingInternal = 10_000) => {
return resource(({ on, use }) => {
let time = cell(0);
let request = use(TrackedFunction(async () => {
// ...
}, time));
let interval = setInterval(() => time.current++, pollingInterval);
on.cleanup(() => clearInterval(interval));
return () => request.current;
});
});
but this isn't implemented yet for TrackedFunction, and I think may have some ergonomics / coherance issues when done this way -- still need to work through it.
Convert to tutorial:
Convert to tutorial:
Fancy CSS effects
- input focus effect from @evoactivity - here
- codepen
- also, it'd be good to support
<style lang="postcss">
If you absolutely must
Topics to cover
- pagination
- data sorting
- component patterns https://emberjs-1.gitbook.io/ember-component-patterns/
- component composition
- passing components
- multiple, single
- provider component
- components as arguments
- contextual components
- blocks
- how to avoid prop drilling
- element-helper: tildeio/ember-element-helper#68
- passing components
- form validation
Convert to tutorial:
- timers / intervals: a countdown
- debounce w/ initial -- explain the return fn - compare to original implementation
more glimmer features:
unbound
j/k: https://discuss.emberjs.com/t/the-status-of-unbound/11187
no one should use this
Integrations with bonkers libraries
"an" implementation for throttle here
casting:
Custom reactive collections that are efficient on memory
demo here
From socials:
- is @cached getters / Formulas / and/or techniques for only triggering a tracked value only if it actually has changed.
- data loading section could use more examples: ember-data, ember-concurrency, and custom logic (a la trackedfunction). Especially highlighting footguns, entanglement of tracked state, etc
add proper <style>
tutorial chapters.
- see: soxhub/ember-scoped-css#36
- and: https://github.com/cardstack/glimmer-scoped-css/blob/main/glimmer-scoped-css/src/postcss-plugin.ts
hopefully one of those two libraries allows for browser-only usage
ember / framework concepts:
- transitionTo is thennable
- also managing qps without a controller (in a component)