Upgrade to Pro — share decks privately, control downloads, hide ads and more …

LINE Developer Meetup: Javascript All The Things

LINE Developer Meetup: Javascript All The Things

43c62cb978571f8e10d6a7ea61c93c08?s=128

Joel Billaud

July 20, 2016
Tweet

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?

  6. None
  7. Green Red Pink

  8. HTML CSS

  9. HTML CSS JavaScript 40 PSDs 2 2 2

  10. PSD HTML Canvas

  11. 40 PSDs 2 5

  12. ⅓ ⅓ ➜

  13. PSD

  14. None
  15. PSD DSL

  16. 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 { ... }
  17. "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": {
  18. HTML Canvas

  19. Reactive UI

  20. Green Red Pink

  21. 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); }; }); }
  22. // 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)) });
  23. 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)) ); }
  24. npm Promise Node npm install beer vodka whiskey #

  25. LINE