Save 37% off PRO during our Black Friday Sale! »

導入事例から学ぶ Polymer開発 / Polymer-Japan-2017-11-04-2

導入事例から学ぶ Polymer開発 / Polymer-Japan-2017-11-04-2

C4c161ae9eeeed8f161197410f7a228a?s=128

Kenichiro Kishida

November 04, 2017
Tweet

Transcript

  1. ಋೖࣄྫ͔ΒֶͿ 1PMZNFS։ൃ 1PMZNFS+BQBO.FFUVQ ,FOJDIJSP,JTIJEB !TJ[VIJLP

  2. ೥ळ ަ௨޲͚γεςϜϓϩτλΠϓ࡞੒Ͱ࠾༻ ϑϩϯτ͸ࢲਓ ೥Ն *P5..ల ळ ͷలࣔσϞΞϓϦͰ࠾༻ ϑϩϯτΤϯυࢲ ϑϦʔͷ+4FS ೥ౙ

    ʢதখاۀ޲͚ʣ঎༻8FCαʔϏε։ൃͰ࠾༻ ϑϩϯτΤϯυࢲ ϑϦʔͷ+4FS ϑϩϯτॳΊͯͷਓ
  3. ೥౰࣌ʜ w ͱΜ͕ͬͯΔͶʂ w ࢖͍ͬͯΔਓ͸͡Ίͯݟͨ w ࢖͑Δͷʁ w ੲ 

    ࢖ͬͨ͜ͱ͋Δ w ͭΒ͘ͳ͍ʁ
  4. w W w WW w WW w W w W

    w W w W w W w W https://github.com/Polymer/polymer/releases 89 Releases!!
  5. ۤ썮썴썝썢ɺࠔ썺썶쎁 ۤ썮썛쎅쎆౰썶쎡લ쎁쎪썷써쎀쎁 ๻쎆ւਤ쎅쎁썛ߤ࿏쎩ߦ썦쎪썷쎤ʁ ௅ઓ썰쎢쎅쎙ɺੜ쎖ग़썰쎅쎙ɺۤ썮썛쎟 썾쎙ɺॆ࣮썮썽쎢 ʮ࢛݄͸܅ͷӕʯΑΓ༗അެਖ਼ͷ໊ݴ

  6. Α͔ͬͨ͜ͱ w )5.-λά͸࠶ར༻ੑ͕ߴ͍ w ϒϩοΫΛ૊ΈཱͯΔΑ͏ͩ w άϩʔόϧԚછͳʹͦΕ w ͸͡Ίͯͷਓ΋ೃછΈ΍͍͢ w

    ʢ׳Εͨਓ͕͍ͨํ͕ྑ͍ʣ
  7. 131-ύλʔϯ

  8. https://developers.google.com/web/fundamentals/performance/prpl-pattern/?hl=ja

  9. 1PMZNFS$-* 'BLF"1*4FSWFS ੩తίϯςϯπͷऔಘ "1*ίʔϧ

  10. None
  11. /1.4DSJQUT “start”: “polymer serve -H 0.0.0.0 & gulp canned”, “lint”:

    “gulp lint”, “lint:ci”: “gulp lint —ci”, “test” : “gulp test”, “test:ci”: “gulp test —ci”, “postinstall”: “bower install”, “deploy:xxx”: “gulp deploy —target=xxx”
  12. 5FTUJOH const wct = require('web-component-tester').test; const options = { plugins:

    { local: ['chrome', 'firefox'], } }; wct(options).then(() => { console.log('テスト成功'); }).catch((error) => { console.log(error); });
  13. ✅ ✅ ✅ ❌ ❌ ✅ ✅ ✅ ✅ ❌

  14. -JOU gulp.task('lint', () => { return gulp.src(['src/**/*.html', '!src/app.html']) .pipe(polylint({noRecursion: true}))

    .pipe(jshint.extract('auto')) .pipe(jshint({expr: true})) .pipe(polylint.combineWithJshintResults()) .pipe(jshint.reporter, 'jshint-stylish') .pipe(jshint.reporter, 'fail'); });
  15. 4 $MPVE'SPOU
 )551

  16. #VJME const htmlminOptions = { collapseWhitespace: true, minifyCSS: true, minifyJS:

    true, removeComments: true }; gulp.task('deploy.minify', () => { return gulp.src(dist('/src/**/*.html')) .pipe(htmlmin(htmlminOptions)) .pipe(gulp.dest(dist('/src'))); });
  17. (FOFSBUF4FSWJDF8PSLFS const PolymerProject = require('polymer-build').PolymerProject; const addServiceWorker = require('polymer-build').addServiceWorker; const

    mergeStream = require('merge-stream'); const swPrecacheConfig = require(path.join(__dirname, '..', '..', 'sw-precache-config.js')); const project = new PolymerProject(require(path.join(__dirname, '..', '..', 'polymer.json'))); gulp.task('deploy.addServiceWorker', ['deploy.stream'], () => { return addServiceWorker({ buildRoot: dist(), project: project, swPrecacheConfig: swPrecacheConfig, }); }); gulp.task('deploy.stream', () => { return mergeStream(project.sources(), project.dependencies()); });
  18. %FQMPZ const awspublish = require('gulp-awspublish'); const parallelize = require("concurrent-transform"); const

    cloudfront = require('gulp-cloudfront-invalidate-aws-publish'); gulp.task('deploy.invalidate', () => { const publisher = createPublisher(); return gulp.src(dist('**/*')) .pipe(parallelize(publisher.publish(headers), 10)) .pipe(publisher.sync()) .pipe(cloudfront(cfSettings)) .pipe(publisher.cache()) .pipe(awspublish.reporter()); });
  19. ·ͱΊ