Submit Search
Upload
Frontendと向き合う
•
2 likes
•
1,233 views
treby
Follow
Repro Tech Meetup #5 でのLT資料です https://repro-tech.connpass.com/event/105947/
Read less
Read more
Technology
Report
Share
Report
Share
1 of 57
Download now
Download to read offline
Recommended
Vue.js + Vuexチーム開発実践の事例
Vue.js + Vuexチーム開発実践の事例
treby
Railsのフロントエンドのトレンドと実際〜事業を進めながら、レールに乗り続けるためのテクニック〜
Railsのフロントエンドのトレンドと実際〜事業を進めながら、レールに乗り続けるためのテクニック〜
treby
Railsフロントエンドの modernizeにおける一事例 ~decaffeinateからES2015移行まで~
Railsフロントエンドの modernizeにおける一事例 ~decaffeinateからES2015移行まで~
treby
Sinatraで触れる生SQL
Sinatraで触れる生SQL
treby
Codestrong 2012 breakout session alloy (mvc) app framework overview
Codestrong 2012 breakout session alloy (mvc) app framework overview
Axway Appcelerator
2010.09.02 LT Doc fluxflex on JAWS-UG
2010.09.02 LT Doc fluxflex on JAWS-UG
Hiro Fukami
既存の資産をXamarinで / Utilize existing assets as Xamarin library
既存の資産をXamarinで / Utilize existing assets as Xamarin library
Yusuke Yamada
UPenn on Rails intro
UPenn on Rails intro
Mat Schaffer
Recommended
Vue.js + Vuexチーム開発実践の事例
Vue.js + Vuexチーム開発実践の事例
treby
Railsのフロントエンドのトレンドと実際〜事業を進めながら、レールに乗り続けるためのテクニック〜
Railsのフロントエンドのトレンドと実際〜事業を進めながら、レールに乗り続けるためのテクニック〜
treby
Railsフロントエンドの modernizeにおける一事例 ~decaffeinateからES2015移行まで~
Railsフロントエンドの modernizeにおける一事例 ~decaffeinateからES2015移行まで~
treby
Sinatraで触れる生SQL
Sinatraで触れる生SQL
treby
Codestrong 2012 breakout session alloy (mvc) app framework overview
Codestrong 2012 breakout session alloy (mvc) app framework overview
Axway Appcelerator
2010.09.02 LT Doc fluxflex on JAWS-UG
2010.09.02 LT Doc fluxflex on JAWS-UG
Hiro Fukami
既存の資産をXamarinで / Utilize existing assets as Xamarin library
既存の資産をXamarinで / Utilize existing assets as Xamarin library
Yusuke Yamada
UPenn on Rails intro
UPenn on Rails intro
Mat Schaffer
Alloy Framework
Alloy Framework
Mads Møller
SPAと覚悟
SPAと覚悟
Teppei Sato
You Don't Know ES Modules
You Don't Know ES Modules
Teppei Sato
There's No Such Thing as a Data Cow
There's No Such Thing as a Data Cow
Alexandra Richards
Practical IronRuby
Practical IronRuby
Shay Friedman
플렉스팀 프론트엔드 기술 스택의 이해: `lint`, `build`, `run`
플렉스팀 프론트엔드 기술 스택의 이해: `lint`, `build`, `run`
Heejong Ahn
Webium: Page Objects In Python (Eng)
Webium: Page Objects In Python (Eng)
Uladzimir Franskevich
海纳百川,有容乃大
海纳百川,有容乃大
hujinpu
サイボウズはいかにしてReactを導入したか
サイボウズはいかにしてReactを導入したか
Yusuke Amano
Riding IronRuby on Rails
Riding IronRuby on Rails
Shay Friedman
Serverlessなものを使ってサービスを作っている話
Serverlessなものを使ってサービスを作っている話
Yasuyuki Fujikawa
Introduction to Padrino
Introduction to Padrino
Masato Igarashi
サイボウズのフロントエンド開発 現在とこれからの挑戦
サイボウズのフロントエンド開発 現在とこれからの挑戦
Teppei Sato
Deploying Rails Applications: Lessons Learned
Deploying Rails Applications: Lessons Learned
Michael Koby
Ruby Kansai #35 About RubyKaigi2009 ujihisa
Ruby Kansai #35 About RubyKaigi2009 ujihisa
ujihisa
Rust meetup delhi nov 18
Rust meetup delhi nov 18
Abhiram Ravikumar
Plone for Education: Bibliographies
Plone for Education: Bibliographies
Cristopher Ewing
ASP.NET MVC
ASP.NET MVC
Shay Friedman
0323社内LT大会
0323社内LT大会
Akira Ohta
失敗から学ぶEM方法論
失敗から学ぶEM方法論
treby
モダンJSでモダンなWebアプリケーションを作ろう!
モダンJSでモダンなWebアプリケーションを作ろう!
treby
Octocatは技術的負債の夢を見るか?
Octocatは技術的負債の夢を見るか?
treby
More Related Content
What's hot
Alloy Framework
Alloy Framework
Mads Møller
SPAと覚悟
SPAと覚悟
Teppei Sato
You Don't Know ES Modules
You Don't Know ES Modules
Teppei Sato
There's No Such Thing as a Data Cow
There's No Such Thing as a Data Cow
Alexandra Richards
Practical IronRuby
Practical IronRuby
Shay Friedman
플렉스팀 프론트엔드 기술 스택의 이해: `lint`, `build`, `run`
플렉스팀 프론트엔드 기술 스택의 이해: `lint`, `build`, `run`
Heejong Ahn
Webium: Page Objects In Python (Eng)
Webium: Page Objects In Python (Eng)
Uladzimir Franskevich
海纳百川,有容乃大
海纳百川,有容乃大
hujinpu
サイボウズはいかにしてReactを導入したか
サイボウズはいかにしてReactを導入したか
Yusuke Amano
Riding IronRuby on Rails
Riding IronRuby on Rails
Shay Friedman
Serverlessなものを使ってサービスを作っている話
Serverlessなものを使ってサービスを作っている話
Yasuyuki Fujikawa
Introduction to Padrino
Introduction to Padrino
Masato Igarashi
サイボウズのフロントエンド開発 現在とこれからの挑戦
サイボウズのフロントエンド開発 現在とこれからの挑戦
Teppei Sato
Deploying Rails Applications: Lessons Learned
Deploying Rails Applications: Lessons Learned
Michael Koby
Ruby Kansai #35 About RubyKaigi2009 ujihisa
Ruby Kansai #35 About RubyKaigi2009 ujihisa
ujihisa
Rust meetup delhi nov 18
Rust meetup delhi nov 18
Abhiram Ravikumar
Plone for Education: Bibliographies
Plone for Education: Bibliographies
Cristopher Ewing
ASP.NET MVC
ASP.NET MVC
Shay Friedman
0323社内LT大会
0323社内LT大会
Akira Ohta
What's hot
(19)
Alloy Framework
Alloy Framework
SPAと覚悟
SPAと覚悟
You Don't Know ES Modules
You Don't Know ES Modules
There's No Such Thing as a Data Cow
There's No Such Thing as a Data Cow
Practical IronRuby
Practical IronRuby
플렉스팀 프론트엔드 기술 스택의 이해: `lint`, `build`, `run`
플렉스팀 프론트엔드 기술 스택의 이해: `lint`, `build`, `run`
Webium: Page Objects In Python (Eng)
Webium: Page Objects In Python (Eng)
海纳百川,有容乃大
海纳百川,有容乃大
サイボウズはいかにしてReactを導入したか
サイボウズはいかにしてReactを導入したか
Riding IronRuby on Rails
Riding IronRuby on Rails
Serverlessなものを使ってサービスを作っている話
Serverlessなものを使ってサービスを作っている話
Introduction to Padrino
Introduction to Padrino
サイボウズのフロントエンド開発 現在とこれからの挑戦
サイボウズのフロントエンド開発 現在とこれからの挑戦
Deploying Rails Applications: Lessons Learned
Deploying Rails Applications: Lessons Learned
Ruby Kansai #35 About RubyKaigi2009 ujihisa
Ruby Kansai #35 About RubyKaigi2009 ujihisa
Rust meetup delhi nov 18
Rust meetup delhi nov 18
Plone for Education: Bibliographies
Plone for Education: Bibliographies
ASP.NET MVC
ASP.NET MVC
0323社内LT大会
0323社内LT大会
More from treby
失敗から学ぶEM方法論
失敗から学ぶEM方法論
treby
モダンJSでモダンなWebアプリケーションを作ろう!
モダンJSでモダンなWebアプリケーションを作ろう!
treby
Octocatは技術的負債の夢を見るか?
Octocatは技術的負債の夢を見るか?
treby
Shinjuku.rb #61 RubyKaigi2018予習
Shinjuku.rb #61 RubyKaigi2018予習
treby
The Art of Collaboration
The Art of Collaboration
treby
楽しく学ぶ?API
楽しく学ぶ?API
treby
VueとdockerとAWSとチームとアイマスと私
VueとdockerとAWSとチームとアイマスと私
treby
アイマスハッカソン2017
アイマスハッカソン2017
treby
最近のRailsフロントエンド開発の紹介
最近のRailsフロントエンド開発の紹介
treby
たたかうFFI
たたかうFFI
treby
mastodon API
mastodon API
treby
TH@NK YOU for SMILE!!とミリオンボーダーbot
TH@NK YOU for SMILE!!とミリオンボーダーbot
treby
Paperclip
Paperclip
treby
このみさんにPRしてもらう
このみさんにPRしてもらう
treby
reading suture
reading suture
treby
趣味から始めるWebスクレイピング
趣味から始めるWebスクレイピング
treby
Osoji to-ban bot
Osoji to-ban bot
treby
Why do I make bots
Why do I make bots
treby
BELIEVE MY DRE@M!!とミリオンボーダーbot
BELIEVE MY DRE@M!!とミリオンボーダーbot
treby
アイマス駆動開発 #shinjukurb
アイマス駆動開発 #shinjukurb
treby
More from treby
(20)
失敗から学ぶEM方法論
失敗から学ぶEM方法論
モダンJSでモダンなWebアプリケーションを作ろう!
モダンJSでモダンなWebアプリケーションを作ろう!
Octocatは技術的負債の夢を見るか?
Octocatは技術的負債の夢を見るか?
Shinjuku.rb #61 RubyKaigi2018予習
Shinjuku.rb #61 RubyKaigi2018予習
The Art of Collaboration
The Art of Collaboration
楽しく学ぶ?API
楽しく学ぶ?API
VueとdockerとAWSとチームとアイマスと私
VueとdockerとAWSとチームとアイマスと私
アイマスハッカソン2017
アイマスハッカソン2017
最近のRailsフロントエンド開発の紹介
最近のRailsフロントエンド開発の紹介
たたかうFFI
たたかうFFI
mastodon API
mastodon API
TH@NK YOU for SMILE!!とミリオンボーダーbot
TH@NK YOU for SMILE!!とミリオンボーダーbot
Paperclip
Paperclip
このみさんにPRしてもらう
このみさんにPRしてもらう
reading suture
reading suture
趣味から始めるWebスクレイピング
趣味から始めるWebスクレイピング
Osoji to-ban bot
Osoji to-ban bot
Why do I make bots
Why do I make bots
BELIEVE MY DRE@M!!とミリオンボーダーbot
BELIEVE MY DRE@M!!とミリオンボーダーbot
アイマス駆動開発 #shinjukurb
アイマス駆動開発 #shinjukurb
Recently uploaded
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
Fwdays
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
comworks
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
Miki Katsuragi
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
Fwdays
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Safe Software
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
BookNet Canada
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
Commit University
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
Alex Barbosa Coqueiro
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
Ridwan Fadjar
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
Rizwan Syed
Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024
Neo4j
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
Mark Billinghurst
Key Features Of Token Development (1).pptx
Key Features Of Token Development (1).pptx
LBM Solutions
Hot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort Service
9953056974 Low Rate Call Girls In Saket, Delhi NCR
APIForce Zurich 5 April Automation LPDG
APIForce Zurich 5 April Automation LPDG
MarianaLemus7
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
gvaughan
Benefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other Frameworks
Softradix Technologies
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
UiPathCommunity
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
Scott Keck-Warren
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024
The Digital Insurer
Recently uploaded
(20)
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
Key Features Of Token Development (1).pptx
Key Features Of Token Development (1).pptx
Hot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort Service
APIForce Zurich 5 April Automation LPDG
APIForce Zurich 5 April Automation LPDG
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
Benefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other Frameworks
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024
Frontendと向き合う
1.
2018/12/04 @treby006 Repro Tech
Meetup #5
2.
• Hiroaki Ninomia
a.k.a treby • Repro • Shinjuku.rb Organizer • P
3.
Frontend Reliability
4.
Frontend is ...
5.
Frontend is ... • • •
6.
• • •
7.
8.
1. 2. Virtual DOM 3.
CI
9.
1.
10.
ES6 ( JS )
11.
My Favorite is •
arrow function • import / export • async / await
12.
JS
13.
14.
15.
※ IE
16.
!
17.
2. Virtual DOM
18.
• 90 (
) • 00 (JavaScript < Flash) • 00 (Ajax / jQuery) • 10 ( ) • 10 (Virtual DOM)
19.
20.
:
21.
:
22.
23.
24.
CoffeeScript jQuery
25.
!
26.
3.
27.
CI (in Repro) •
Unit Test (mocha w/ karma) • ESLint • System spec (on Rails)
28.
Unit Test
29.
System Spec
30.
Frontendo
31.
Frontendo
32.
33.
34.
35.
Pass
36.
37.
!
38.
39.
Frontend is
40.
41.
42.
43.
44.
45.
!
46.
• • • …… •
47.
• (Rails ) • •
48.
• • • •
49.
…… • jQuery
50.
…… • jQuery • ES6
51.
…… • jQuery • ES6 •
CoffeeScript
52.
53.
54.
55.
is
56.
57.
Happy Hacking!!
Download now