Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
導入事例から学ぶ Polymer開発 / Polymer-Japan-2017-11-04-2
Kenichiro Kishida
November 04, 2017
Technology
1
510
導入事例から学ぶ Polymer開発 / Polymer-Japan-2017-11-04-2
Kenichiro Kishida
November 04, 2017
Tweet
Share
More Decks by Kenichiro Kishida
See All by Kenichiro Kishida
Rails 7の採用提案で注目を集め始めた Import maps の過去、現在、そして未来について/de radio 2
sizuhiko
2
260
勉強会主体で サービスを作るということ/esm-meetup-3
sizuhiko
0
250
オンライン勉強会や イベントで 盛り上がりを共有したい!/jsfes2021-summer
sizuhiko
0
480
E2Eテストに向き合う/PHPerKaigi2020
sizuhiko
1
1.8k
PHPを学ぶということ / phpcon-2019
sizuhiko
1
1.4k
PuppeteerをE2Eテストに利用する/jsfes-2019-winter
sizuhiko
0
830
AMP/CakeFest 2019 Tokyo LT
sizuhiko
1
46
標準インターフェースを使った アプリケーション開発/phpcon-okinawa-2019
sizuhiko
0
420
PHPを学ぶということ / phpcondo-2019
sizuhiko
2
3.5k
Other Decks in Technology
See All in Technology
データエンジニアと作るデータ文化
yuki_saito
4
1.7k
Apa itu DevOps & Kenapa perlu belajar DevOps?
dicodingevent
0
110
220628 「Google AppSheet」タスク管理アプリをライブ作成 吉積情報伊藤さん
comucal
PRO
0
240
Lessons Learned from Scaling Infrastructure as Code
joatmon08
0
800
Apple M1 CPUの脆弱性「PACMAN」について解説する
kuzushiki
0
110
Target SDK Versionを上げない Notification runtime permission対応
napplecomputer
0
150
Design for Humans: How to make better modernization decisions
indualagarsamy
2
130
情報の世界 2022年度 第11回「都市のデータ」 #情報の世界 / Data of City 2022
yumulab
0
110
Data in Google I/O - IO Extended GDG Seoul
kennethanceyer
0
160
【toranoana.deno#7】Denoからwasmを呼び出す基礎
toranoana
0
130
Camp Digital 2022: tailored advice
kyliehavelock
0
150
The Fractal Geometry of Software Design
vladikk
1
1.3k
Featured
See All Featured
Three Pipe Problems
jasonvnalue
89
8.7k
The Illustrated Children's Guide to Kubernetes
chrisshort
15
36k
Fantastic passwords and where to find them - at NoRuKo
philnash
27
1.5k
Building Flexible Design Systems
yeseniaperezcruz
310
34k
Robots, Beer and Maslow
schacon
152
7.1k
How to name files
jennybc
40
61k
It's Worth the Effort
3n
172
25k
Making Projects Easy
brettharned
98
4.3k
GraphQLとの向き合い方2022年版
quramy
16
8.3k
Typedesign – Prime Four
hannesfritz
34
1.4k
Gamification - CAS2011
davidbonilla
75
3.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
10
3.4k
Transcript
ಋೖࣄྫ͔ΒֶͿ 1PMZNFS։ൃ 1PMZNFS+BQBO.FFUVQ ,FOJDIJSP,JTIJEB !TJ[VIJLP
ळ ަ௨͚γεςϜϓϩτλΠϓ࡞Ͱ࠾༻ ϑϩϯτࢲਓ Ն *P5..ల ळ ͷలࣔσϞΞϓϦͰ࠾༻ ϑϩϯτΤϯυࢲ ϑϦʔͷ+4FS ౙ
ʢதখاۀ͚ʣ༻8FCαʔϏε։ൃͰ࠾༻ ϑϩϯτΤϯυࢲ ϑϦʔͷ+4FS ϑϩϯτॳΊͯͷਓ
࣌ʜ w ͱΜ͕ͬͯΔͶʂ w ͍ͬͯΔਓ͡Ίͯݟͨ w ͑Δͷʁ w ੲ
ͬͨ͜ͱ͋Δ w ͭΒ͘ͳ͍ʁ
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!!
ۤ썮썴썝썢ɺࠔ썺썶쎁 ۤ썮썛쎅쎆썶쎡લ쎁쎪썷써쎀쎁 쎆ւਤ쎅쎁썛ߤ࿏쎩ߦ썦쎪썷쎤ʁ ઓ썰쎢쎅쎙ɺੜ쎖ग़썰쎅쎙ɺۤ썮썛쎟 썾쎙ɺॆ࣮썮썽쎢 ʮ࢛݄܅ͷӕʯΑΓ༗അެਖ਼ͷ໊ݴ
Α͔ͬͨ͜ͱ w )5.-λά࠶ར༻ੑ͕ߴ͍ w ϒϩοΫΛΈཱͯΔΑ͏ͩ w άϩʔόϧԚછͳʹͦΕ w ͡ΊͯͷਓೃછΈ͍͢ w
ʢ׳Εͨਓ͕͍ͨํ͕ྑ͍ʣ
131-ύλʔϯ
https://developers.google.com/web/fundamentals/performance/prpl-pattern/?hl=ja
1PMZNFS$-* 'BLF"1*4FSWFS ੩తίϯςϯπͷऔಘ "1*ίʔϧ
None
/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”
5FTUJOH const wct = require('web-component-tester').test; const options = { plugins:
{ local: ['chrome', 'firefox'], } }; wct(options).then(() => { console.log('テスト成功'); }).catch((error) => { console.log(error); });
✅ ✅ ✅ ❌ ❌ ✅ ✅ ✅ ✅ ❌
-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'); });
4 $MPVE'SPOU )551
#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'))); });
(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()); });
%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()); });
·ͱΊ