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
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
Safe Software
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
wesley chun
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
Delhi Call girls
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Miguel Araújo
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
sammart93
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
wesley chun
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
Anna Loughnan Colquhoun
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
Martijn de Jong
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
Antenna Manufacturer Coco
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
Remote DBA Services
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
The Digital Insurer
presentation ICT roal in 21st century education
presentation ICT roal in 21st century education
jfdjdjcjdnsjd
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
lior mazor
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
HampshireHUG
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
Rafal Los
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
RTylerCroy
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Drew Madelung
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
debabhi2
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
sudhanshuwaghmare1
Recently uploaded
(20)
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
presentation ICT roal in 21st century education
presentation ICT roal in 21st century education
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
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