Webフロントの変化 ～時代はPWAへ？～

IT研修で5分間LTを行った資料です。
聴衆はプログラミング初心者でしたので、それに合わせたものです。

Transcript

1. Webフロントの変化 高木　徹 @TTrpbm 時代はPWAへ？
2. 背景 最新の情報追ってますか？ 2 2018/4/18
3. 背景 Web フロントの変化は激しい 3 2018/4/18
4. 目的 ✔ Web フロントの変化の速さに恐怖を覚える ✔ Web フロントがどこまでできるか知る 4 2018/4/18
5. Webの変化 HTML/CSS/JavaScript(jQuery) 5 2018/4/18
6. Webの変化 HTML5, CSS3, EcmaScript6, Pug, bael, AltJS, SASS, SCSS, Stylus, Webpack, TypeScript, Node.js, npm, yarn, glup, grunt, Browserify, JSX, Vue.js, React, Angular, Redux, Vuex, Nuxt.js, SPA, SSR, REST API, Ajax, Module, Axios, Bulma, Bootstrap, Ionic, Fundation, PureCSS, MUICSS, Motion UI, MaterialDesign, Vuetify, Mustach, Handlebars, doT, EJS, Jade, Less.js, Compass, Git, SVN, Mercurial, Bower, Meteor.js, Ember, Backbone, Lodash, Ionic, Quasar, React Native, Xamarin, Framework7, Onsen UI, Kendo UI, Sencha Touch, CofeeScript, Traceur, JSHint, JSLint, JSCS, ESLint, RequireJS, Broccoli, Jasmine, Mocha, Jest, Ava, WebAssembly 6 2018/4/18
7. examle emo code index.vue( 一部抜粋 ) 7 2018/4/18 図 1 　近代的なコードの例
8. ✔ Web フロントの変化の速さに恐怖を覚える ✔ Web フロントがどこまでできるか 8 2018/4/18
9. PWA ▪ Progressive Web Apps ▪ Web でスマホアプリのような体験 (UX) 9 2018/4/18
10. PWAの例 ▪ホーム画面追加 ▪オフライン対応 ▪ Push 通知 10 2018/4/18 図 2 　 PWA の例
11. PWAの利点 ▪スマホアプリ作らなくていいかも ▪既存のものを活用 ▪実装が簡単 ▪ etc... 11 2018/4/18
12. Web Developer Roadmap 2018 ▪ Kamran Ahmed ▪ kamranahmedse/developer-roadmap[1] [1]Kamran Ahmed, “developer roadmap,” https://github.com/kamranahmedse/developer-roadmap, 2018-01-01( 閲覧日： 2018/4/15). 12 2018/4/18 図 3 Kamran Ahmed 図 4 Web Developer Roadmap2018
13. まとめ 13 2018/4/18 ▪ Web フロントの変化は激しい ▪様々な技術が使われるように ▪ PWA ▪スマホの機能が Web に ▪ Web Developer Roadmap 2018