Commit 76b336a49e9c19973592a5bc4a6817c87465b34a
things
Michael Williams committed on 8/5/2017, 11:04:36 AMParent: badf9524f5f9e1de0c15c5d16316367bd34b53de
Files changed
| README.md | changed |
| index.html | changed |
| README.md | |||
|---|---|---|---|
| @@ -37,9 +37,9 @@ | |||
| 37 | 37 … | <http://dinosaur.is/campjs-viii-ludditejs> | |
| 38 | 38 … | ||
| 39 | 39 … | ??? | |
| 40 | 40 … | ||
| 41 | -- second time presenting at a conference. | ||
| 41 … | +- second time presenting at a conference | ||
| 42 | 42 … | - i want to share what i am passionate about | |
| 43 | 43 … | - i might say negative things about some JavaScript patterns, but i use those patterns too | |
| 44 | 44 … | - i don't want to yuck your yum | |
| 45 | 45 … | - i'll try to be upfront and honest, apologies in advance if i disguise any opinions as facts | |
| @@ -51,9 +51,9 @@ | |||
| 51 | 51 … | ## shout-out | |
| 52 | 52 … | ||
| 53 | 53 … | ??? | |
| 54 | 54 … | ||
| 55 | -- when i was writing this talk a few days ago, covered in Imposter Syndrome, i realized... | ||
| 55 … | +- when i was writing this talk a few days ago, deep in Imposter Syndrome, i realized... | ||
| 56 | 56 … | - someone inspired my passion behind this talk without me realizing | |
| 57 | 57 … | ||
| 58 | 58 … | --- | |
| 59 | 59 … | class: info | |
| @@ -173,8 +173,24 @@ | |||
| 173 | 173 … | ||
| 174 | 174 … | --- | |
| 175 | 175 … | class: info | |
| 176 | 176 … | ||
| 177 … | +what if i told you... | ||
| 178 … | + | ||
| 179 … | +<img src="./morpheus-cat.png" height="400" /> | ||
| 180 … | + | ||
| 181 … | +that you only needed _functions and objects_? | ||
| 182 … | + | ||
| 183 … | +??? | ||
| 184 … | + | ||
| 185 … | +- no fancy syntax necessary | ||
| 186 … | + - less language clutter | ||
| 187 … | +- how can we apply this pattern to the full stack? | ||
| 188 … | + | ||
| 189 … | + | ||
| 190 … | +--- | ||
| 191 … | +class: info | ||
| 192 … | + | ||
| 177 | 193 … | ### what is a _luddite.js_ standard? | |
| 178 | 194 … | ||
| 179 | 195 … | a standard based on a function signature | |
| 180 | 196 … | ||
| @@ -209,23 +225,8 @@ | |||
| 209 | 225 … | ||
| 210 | 226 … | ## simple patterns based on function signatures | |
| 211 | 227 … | ||
| 212 | 228 … | --- | |
| 213 | -class: info | ||
| 214 | - | ||
| 215 | -what if i told you... | ||
| 216 | - | ||
| 217 | -<img src="./morpheus-cat.png" height="400" /> | ||
| 218 | - | ||
| 219 | -that you only needed _functions and objects_? | ||
| 220 | - | ||
| 221 | -??? | ||
| 222 | - | ||
| 223 | -- no fancy syntax necessary | ||
| 224 | - - less language clutter | ||
| 225 | -- how can we apply this pattern to the full stack? | ||
| 226 | - | ||
| 227 | ---- | ||
| 228 | 229 … | class: success | |
| 229 | 230 … | ||
| 230 | 231 … | ### just a function | |
| 231 | 232 … | ||
| @@ -418,9 +419,9 @@ | |||
| 418 | 419 … | ||
| 419 | 420 … | module.exports = Todos | |
| 420 | 421 … | ||
| 421 | 422 … | const Todos = ({ items }) => ( | |
| 422 | - h(List, {}, items.map(item => | ||
| 423 … | + h(List, null, items.map(item => | ||
| 423 | 424 … | h(Item, { item }) | |
| 424 | 425 … | )) | |
| 425 | 426 … | ) | |
| 426 | 427 … | ||
| @@ -444,9 +445,9 @@ | |||
| 444 | 445 … | ||
| 445 | 446 … | --- | |
| 446 | 447 … | class: danger | |
| 447 | 448 … | ||
| 448 | -### promise | ||
| 449 … | +### promise spec | ||
| 449 | 450 … | ||
| 450 | 451 … | ```js | |
| 451 | 452 … | const promise = new Promise((resolve, reject) => { | |
| 452 | 453 … | // do stuff... | |
| @@ -463,8 +464,10 @@ | |||
| 463 | 464 … | ``` | |
| 464 | 465 … | ||
| 465 | 466 … | ??? | |
| 466 | 467 … | ||
| 468 … | +https://tc39.github.io/ecma262/#sec-promise-objects | ||
| 469 … | + | ||
| 467 | 470 … | TODO waterfall | |
| 468 | 471 … | ||
| 469 | 472 … | parallel | |
| 470 | 473 … | ||
| @@ -568,11 +571,11 @@ | |||
| 568 | 571 … | ### observ-ables | |
| 569 | 572 … | ||
| 570 | 573 … | reactive values using only functions! | |
| 571 | 574 … | ||
| 572 | -> - `thing()` gets the value | ||
| 573 | -> - `thing.set(...)` sets the value | ||
| 574 | -> - `thing(function (value) { ... })` listens to the value. | ||
| 575 … | +- `thing()` gets the value | ||
| 576 … | +- `thing.set(value)` sets the value | ||
| 577 … | +- `thing((value) => { ... })` listens to the value | ||
| 575 | 578 … | ||
| 576 | 579 … | ??? | |
| 577 | 580 … | ||
| 578 | 581 … | - [`observ`](https://github.com/Raynos/observ) | |
| @@ -583,13 +586,39 @@ | |||
| 583 | 586 … | --- | |
| 584 | 587 … | class: success | |
| 585 | 588 … | ||
| 586 | 589 … | ```js | |
| 587 | -TODO add mutant html example | ||
| 590 … | +const { h, Struct, Value, when } = require('mutant') | ||
| 591 … | + | ||
| 592 … | +const toggle = (state) => { | ||
| 593 … | + state.set(!state()) | ||
| 594 … | +} | ||
| 595 … | + | ||
| 596 … | +const Activity = ({ activity: { isActive, text }) => ( | ||
| 597 … | + h('div', { | ||
| 598 … | + style: { | ||
| 599 … | + color: when(isActive, 'green', 'red') | ||
| 600 … | + }, | ||
| 601 … | + events: { | ||
| 602 … | + click: () => toggle(isActive) | ||
| 603 … | + } | ||
| 604 … | + }, text) | ||
| 605 … | +) | ||
| 606 … | + | ||
| 607 … | +var activity = Struct({ | ||
| 608 … | + text: Value('give a talk'), | ||
| 609 … | + isActive: Value(true) | ||
| 610 … | +}) | ||
| 611 … | +var element = Activity({ activity }) | ||
| 612 … | + | ||
| 613 … | +document.body.appendChild(element) | ||
| 588 | 614 … | ``` | |
| 589 | 615 … | ||
| 590 | 616 … | ??? | |
| 591 | 617 … | ||
| 618 … | +- mutant has observables for all composite data structures: arrays, sets, dictionaries, etc | ||
| 619 … | +- updates in-place, no dom diff-ing! | ||
| 620 … | + | ||
| 592 | 621 … | --- | |
| 593 | 622 … | class: center, info | |
| 594 | 623 … | ||
| 595 | 624 … | ## values over time | |
| @@ -645,16 +674,16 @@ | |||
| 645 | 674 … | ||
| 646 | 675 … | --- | |
| 647 | 676 … | class: success | |
| 648 | 677 … | ||
| 649 | -#### source spec | ||
| 678 … | +#### source | ||
| 650 | 679 … | ||
| 651 | 680 … | ```js | |
| 652 | 681 … | function createSource (...args) { | |
| 653 | 682 … | // a source function accepts | |
| 654 | 683 … | // - abort: a boolean whether to signal end | |
| 655 | 684 … | // - callback: where to send next signal | |
| 656 | - return source (abort, callback) => { | ||
| 685 … | + return (abort, callback) => { | ||
| 657 | 686 … | if (abort || done) callback(true) | |
| 658 | 687 … | else callback(null, value) | |
| 659 | 688 … | } | |
| 660 | 689 … | } | |
| @@ -779,15 +808,9 @@ | |||
| 779 | 808 … | // a sink function: accept a source | |
| 780 | 809 … | return (source) => { | |
| 781 | 810 … | // but return another source! | |
| 782 | 811 … | return (abort, callback) { | |
| 783 | - // if the through should abort, pass that on. | ||
| 784 | - source(abort, (err, value) => { | ||
| 785 | - // if the source has an error, pass that on. | ||
| 786 | - if (err) callback(err) | ||
| 787 | - // else transform the value | ||
| 788 | - else callback(null, transformValue(value)) | ||
| 789 | - }) | ||
| 812 … | + // ... | ||
| 790 | 813 … | } | |
| 791 | 814 … | } | |
| 792 | 815 … | } | |
| 793 | 816 … | ``` | |
| @@ -1145,10 +1168,10 @@ | |||
| 1145 | 1168 … | - [Tiny Guide to Non Fancy Node](https://github.com/yoshuawuyts/tiny-guide-to-non-fancy-node) | |
| 1146 | 1169 … | ||
| 1147 | 1170 … | ## luddite.js apps | |
| 1148 | 1171 … | ||
| 1172 … | +- https://scuttlebutt.nz/ | ||
| 1173 … | +- http://loopjs.com/ | ||
| 1174 … | +- https://choo.io/ | ||
| 1149 | 1175 … | - https://webtorrent.io/ | |
| 1150 | 1176 … | - http://standardjs.com/ | |
| 1151 | 1177 … | - https://peermaps.github.io/ | |
| 1152 | -- http://loopjs.com/ | ||
| 1153 | -- https://scuttlebutt.nz/ | ||
| 1154 | -- https://choo.io/ | ||
| index.html | ||
|---|---|---|
| The diff is too large to show. Use a local git client to view these changes. Old file size: 901141 bytes New file size: 901081 bytes |
Built with git-ssb-web