LINE Developer Meetup: Javascript All The Things

Transcript

1. Image copyright: Hyperbole and a Half LINE Fukuoka Joël Billaud 2016-07-20
2. 2015 11 LINE Fukuoka Creators Market
3. JavaScript?
4. Perl JavaScript (ES6) bless +{ description => $description, methods => \@methods, }; bless +{ description => $description, methods => \@methods, }; { description, methods, };
5. Perl?
7. Green Red Pink
8. HTML CSS
9. HTML CSS JavaScript 40 PSDs 2 2 2
10. ➜
11. PSD HTML Canvas
12. 40 PSDs 2 5
13. ⅓ ⅓ ➜
14. PSD
16. PSD DSL
17. PSD npm install psd # > const PSD = require('psd') > const psd = PSD.fromFile(filepath) > const layer = psd.tree().children()[0] // PSD > layer.name // 'Friends @a.top.title' >[layer.width, layer.height] // [629, 1140] > layer.toPng() // Stream { ... }
18. "AndroidFriends": { "ja": { "width": 720, "height": 1232, "layers": [ { "color": "a.friends.bg" "rect": { "left": 0, "top": 0, "width": 720, "height": 1232 } }, { "color": "a.top.button" "src": {
19. HTML Canvas
20. Reactive UI
21. Green Red Pink
22. function renderPreviewScreen(ctx, preview) { // Promise const renderers = preview.layers.map(layer => { if (layer.element) { return loadElementLayer(...); } else if (layer.rect) { return loadRectLayer(...); } else { return loadSpriteLayer(...); } }); // ... function loadSpriteLayer(layer, spriteUrl, colors) { return loadImage(spriteUrl).then(sprite => { return function render(ctx) { ctx.drawImage(sprite, src, dst); }; }); }
23. // Promise.all(renderers).then(...); // renderers.each(render => render.then(...)); // renderers[0].then(render => render(ctx)) .then(() => renderers[1]).then(render => render(ctx)) .then(() => renderers[2]).then(render => render(ctx)) ... .then(() => renderers[n]).then(render => render(ctx)) // reduce renderers.reduce((previous, current) => { return previous .then(() => current) .then(render => render(ctx)) });
24. function renderPreviewScreen(ctx, preview) { return preview.layers.map(layer => { if (layer.element) { return loadElementLayer(...); } else if (layer.rect) { return loadRectLayer(...); } else { return loadSpriteLayer(...); } }) .reduce((previous, current) => previous.then(() => current) .then(render => render(ctx)) ); }
25. npm Promise Node npm install beer vodka whiskey #
26. LINE