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

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 
   W
   
   
   
   
   W
   w 
   W
   
   
   
   
   W
   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*ίʔϧ
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. (FOFSBUF
    4FSWJDF
    8PSLFS 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. ·ͱΊ