SlideShare a Scribd company logo
1 of 57
Download to read offline
2018/12/04 @treby006
Repro Tech Meetup #5
• Hiroaki Ninomia a.k.a treby
• Repro
• Shinjuku.rb Organizer
• P
Frontend Reliability
Frontend is ...
Frontend is ...
•
•
•
•
•
•
1.
2. Virtual DOM
3. CI
1.
ES6
( JS )
My Favorite is
• arrow function
• import / export
• async / await
JS
※ IE
!
2.
Virtual DOM
• 90 ( )
• 00 (JavaScript < Flash)
• 00 (Ajax / jQuery)
• 10 ( )
• 10 (Virtual DOM)
:
:
CoffeeScript jQuery
!
3.
CI (in Repro)
• Unit Test (mocha w/ karma)
• ESLint
• System spec (on Rails)
Unit Test
System Spec
Frontendo
Frontendo
Pass
!
Frontend is
!
•
•
• ……
•
• (Rails )
•
•
•
•
•
•
……
• jQuery
……
• jQuery
• ES6
……
• jQuery
• ES6
• CoffeeScript
is
Happy Hacking!!

More Related Content

What's hot

You Don't Know ES Modules
You Don't Know ES ModulesYou Don't Know ES Modules
You Don't Know ES ModulesTeppei Sato
 
There's No Such Thing as a Data Cow
There's No Such Thing as a Data CowThere's No Such Thing as a Data Cow
There's No Such Thing as a Data CowAlexandra Richards
 
플렉스팀 프론트엔드 기술 스택의 이해: `lint`, `build`, `run`
플렉스팀 프론트엔드 기술 스택의 이해: `lint`, `build`, `run`플렉스팀 프론트엔드 기술 스택의 이해: `lint`, `build`, `run`
플렉스팀 프론트엔드 기술 스택의 이해: `lint`, `build`, `run`Heejong Ahn
 
Webium: Page Objects In Python (Eng)
Webium: Page Objects In Python (Eng)Webium: Page Objects In Python (Eng)
Webium: Page Objects In Python (Eng)Uladzimir Franskevich
 
海纳百川,有容乃大
海纳百川,有容乃大海纳百川,有容乃大
海纳百川,有容乃大hujinpu
 
サイボウズはいかにしてReactを導入したか
サイボウズはいかにしてReactを導入したかサイボウズはいかにしてReactを導入したか
サイボウズはいかにしてReactを導入したかYusuke Amano
 
Riding IronRuby on Rails
Riding IronRuby on RailsRiding IronRuby on Rails
Riding IronRuby on RailsShay Friedman
 
Serverlessなものを使ってサービスを作っている話
Serverlessなものを使ってサービスを作っている話Serverlessなものを使ってサービスを作っている話
Serverlessなものを使ってサービスを作っている話Yasuyuki Fujikawa
 
サイボウズのフロントエンド開発 現在とこれからの挑戦
サイボウズのフロントエンド開発 現在とこれからの挑戦サイボウズのフロントエンド開発 現在とこれからの挑戦
サイボウズのフロントエンド開発 現在とこれからの挑戦Teppei Sato
 
Deploying Rails Applications: Lessons Learned
Deploying Rails Applications: Lessons LearnedDeploying Rails Applications: Lessons Learned
Deploying Rails Applications: Lessons LearnedMichael Koby
 
Ruby Kansai #35 About RubyKaigi2009 ujihisa
Ruby Kansai #35 About RubyKaigi2009 ujihisaRuby Kansai #35 About RubyKaigi2009 ujihisa
Ruby Kansai #35 About RubyKaigi2009 ujihisaujihisa
 
Plone for Education: Bibliographies
Plone for Education: BibliographiesPlone for Education: Bibliographies
Plone for Education: BibliographiesCristopher Ewing
 
0323社内LT大会
0323社内LT大会0323社内LT大会
0323社内LT大会Akira Ohta
 

What's hot (19)

Alloy Framework
Alloy FrameworkAlloy Framework
Alloy Framework
 
SPAと覚悟
SPAと覚悟SPAと覚悟
SPAと覚悟
 
You Don't Know ES Modules
You Don't Know ES ModulesYou 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 CowThere's No Such Thing as a Data Cow
There's No Such Thing as a Data Cow
 
Practical IronRuby
Practical IronRubyPractical IronRuby
Practical IronRuby
 
플렉스팀 프론트엔드 기술 스택의 이해: `lint`, `build`, `run`
플렉스팀 프론트엔드 기술 스택의 이해: `lint`, `build`, `run`플렉스팀 프론트엔드 기술 스택의 이해: `lint`, `build`, `run`
플렉스팀 프론트엔드 기술 스택의 이해: `lint`, `build`, `run`
 
Webium: Page Objects In Python (Eng)
Webium: Page Objects In Python (Eng)Webium: Page Objects In Python (Eng)
Webium: Page Objects In Python (Eng)
 
海纳百川,有容乃大
海纳百川,有容乃大海纳百川,有容乃大
海纳百川,有容乃大
 
サイボウズはいかにしてReactを導入したか
サイボウズはいかにしてReactを導入したかサイボウズはいかにしてReactを導入したか
サイボウズはいかにしてReactを導入したか
 
Riding IronRuby on Rails
Riding IronRuby on RailsRiding IronRuby on Rails
Riding IronRuby on Rails
 
Serverlessなものを使ってサービスを作っている話
Serverlessなものを使ってサービスを作っている話Serverlessなものを使ってサービスを作っている話
Serverlessなものを使ってサービスを作っている話
 
Introduction to Padrino
Introduction to PadrinoIntroduction to Padrino
Introduction to Padrino
 
サイボウズのフロントエンド開発 現在とこれからの挑戦
サイボウズのフロントエンド開発 現在とこれからの挑戦サイボウズのフロントエンド開発 現在とこれからの挑戦
サイボウズのフロントエンド開発 現在とこれからの挑戦
 
Deploying Rails Applications: Lessons Learned
Deploying Rails Applications: Lessons LearnedDeploying Rails Applications: Lessons Learned
Deploying Rails Applications: Lessons Learned
 
Ruby Kansai #35 About RubyKaigi2009 ujihisa
Ruby Kansai #35 About RubyKaigi2009 ujihisaRuby Kansai #35 About RubyKaigi2009 ujihisa
Ruby Kansai #35 About RubyKaigi2009 ujihisa
 
Rust meetup delhi nov 18
Rust meetup delhi nov 18Rust meetup delhi nov 18
Rust meetup delhi nov 18
 
Plone for Education: Bibliographies
Plone for Education: BibliographiesPlone for Education: Bibliographies
Plone for Education: Bibliographies
 
ASP.NET MVC
ASP.NET MVCASP.NET MVC
ASP.NET MVC
 
0323社内LT大会
0323社内LT大会0323社内LT大会
0323社内LT大会
 

More from treby

失敗から学ぶEM方法論
失敗から学ぶEM方法論失敗から学ぶEM方法論
失敗から学ぶEM方法論treby
 
モダンJSでモダンなWebアプリケーションを作ろう!
モダンJSでモダンなWebアプリケーションを作ろう!モダンJSでモダンなWebアプリケーションを作ろう!
モダンJSでモダンなWebアプリケーションを作ろう!treby
 
Octocatは技術的負債の夢を見るか?
Octocatは技術的負債の夢を見るか?Octocatは技術的負債の夢を見るか?
Octocatは技術的負債の夢を見るか?treby
 
Shinjuku.rb #61 RubyKaigi2018予習
Shinjuku.rb #61 RubyKaigi2018予習Shinjuku.rb #61 RubyKaigi2018予習
Shinjuku.rb #61 RubyKaigi2018予習treby
 
The Art of Collaboration
The Art of CollaborationThe Art of Collaboration
The Art of Collaborationtreby
 
楽しく学ぶ?API
楽しく学ぶ?API楽しく学ぶ?API
楽しく学ぶ?APItreby
 
VueとdockerとAWSとチームとアイマスと私
VueとdockerとAWSとチームとアイマスと私VueとdockerとAWSとチームとアイマスと私
VueとdockerとAWSとチームとアイマスと私treby
 
アイマスハッカソン2017
アイマスハッカソン2017アイマスハッカソン2017
アイマスハッカソン2017treby
 
最近のRailsフロントエンド開発の紹介
最近のRailsフロントエンド開発の紹介最近のRailsフロントエンド開発の紹介
最近のRailsフロントエンド開発の紹介treby
 
たたかうFFI
たたかうFFIたたかうFFI
たたかうFFItreby
 
mastodon API
mastodon APImastodon API
mastodon APItreby
 
TH@NK YOU for SMILE!!とミリオンボーダーbot
TH@NK YOU for SMILE!!とミリオンボーダーbotTH@NK YOU for SMILE!!とミリオンボーダーbot
TH@NK YOU for SMILE!!とミリオンボーダーbottreby
 
Paperclip
PaperclipPaperclip
Papercliptreby
 
このみさんにPRしてもらう
このみさんにPRしてもらうこのみさんにPRしてもらう
このみさんにPRしてもらうtreby
 
reading suture
reading suturereading suture
reading suturetreby
 
趣味から始めるWebスクレイピング
趣味から始めるWebスクレイピング趣味から始めるWebスクレイピング
趣味から始めるWebスクレイピングtreby
 
Osoji to-ban bot
Osoji to-ban botOsoji to-ban bot
Osoji to-ban bottreby
 
Why do I make bots
Why do I make botsWhy do I make bots
Why do I make botstreby
 
BELIEVE MY DRE@M!!とミリオンボーダーbot
BELIEVE MY DRE@M!!とミリオンボーダーbotBELIEVE MY DRE@M!!とミリオンボーダーbot
BELIEVE MY DRE@M!!とミリオンボーダーbottreby
 
アイマス駆動開発 #shinjukurb
アイマス駆動開発 #shinjukurbアイマス駆動開発 #shinjukurb
アイマス駆動開発 #shinjukurbtreby
 

More from treby (20)

失敗から学ぶEM方法論
失敗から学ぶEM方法論失敗から学ぶEM方法論
失敗から学ぶEM方法論
 
モダンJSでモダンなWebアプリケーションを作ろう!
モダンJSでモダンなWebアプリケーションを作ろう!モダンJSでモダンなWebアプリケーションを作ろう!
モダンJSでモダンなWebアプリケーションを作ろう!
 
Octocatは技術的負債の夢を見るか?
Octocatは技術的負債の夢を見るか?Octocatは技術的負債の夢を見るか?
Octocatは技術的負債の夢を見るか?
 
Shinjuku.rb #61 RubyKaigi2018予習
Shinjuku.rb #61 RubyKaigi2018予習Shinjuku.rb #61 RubyKaigi2018予習
Shinjuku.rb #61 RubyKaigi2018予習
 
The Art of Collaboration
The Art of CollaborationThe Art of Collaboration
The Art of Collaboration
 
楽しく学ぶ?API
楽しく学ぶ?API楽しく学ぶ?API
楽しく学ぶ?API
 
VueとdockerとAWSとチームとアイマスと私
VueとdockerとAWSとチームとアイマスと私VueとdockerとAWSとチームとアイマスと私
VueとdockerとAWSとチームとアイマスと私
 
アイマスハッカソン2017
アイマスハッカソン2017アイマスハッカソン2017
アイマスハッカソン2017
 
最近のRailsフロントエンド開発の紹介
最近のRailsフロントエンド開発の紹介最近のRailsフロントエンド開発の紹介
最近のRailsフロントエンド開発の紹介
 
たたかうFFI
たたかうFFIたたかうFFI
たたかうFFI
 
mastodon API
mastodon APImastodon API
mastodon API
 
TH@NK YOU for SMILE!!とミリオンボーダーbot
TH@NK YOU for SMILE!!とミリオンボーダーbotTH@NK YOU for SMILE!!とミリオンボーダーbot
TH@NK YOU for SMILE!!とミリオンボーダーbot
 
Paperclip
PaperclipPaperclip
Paperclip
 
このみさんにPRしてもらう
このみさんにPRしてもらうこのみさんにPRしてもらう
このみさんにPRしてもらう
 
reading suture
reading suturereading suture
reading suture
 
趣味から始めるWebスクレイピング
趣味から始めるWebスクレイピング趣味から始めるWebスクレイピング
趣味から始めるWebスクレイピング
 
Osoji to-ban bot
Osoji to-ban botOsoji to-ban bot
Osoji to-ban bot
 
Why do I make bots
Why do I make botsWhy do I make bots
Why do I make bots
 
BELIEVE MY DRE@M!!とミリオンボーダーbot
BELIEVE MY DRE@M!!とミリオンボーダーbotBELIEVE MY DRE@M!!とミリオンボーダーbot
BELIEVE MY DRE@M!!とミリオンボーダーbot
 
アイマス駆動開発 #shinjukurb
アイマス駆動開発 #shinjukurbアイマス駆動開発 #shinjukurb
アイマス駆動開発 #shinjukurb
 

Recently uploaded

"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii SoldatenkoFwdays
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsMiki Katsuragi
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationSafe Software
 
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024BookNet Canada
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!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.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 
Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024Neo4j
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
Key Features Of Token Development (1).pptx
Key  Features Of Token  Development (1).pptxKey  Features Of Token  Development (1).pptx
Key Features Of Token Development (1).pptxLBM Solutions
 
APIForce Zurich 5 April Automation LPDG
APIForce Zurich 5 April  Automation LPDGAPIForce Zurich 5 April  Automation LPDG
APIForce Zurich 5 April Automation LPDGMarianaLemus7
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
Benefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksBenefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksSoftradix Technologies
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Scott Keck-Warren
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024The Digital Insurer
 

Recently uploaded (20)

"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"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):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"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 InnovationBeyond 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 2024New 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!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.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy 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 CertsScanning 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 2024Build 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 SystemsHuman 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).pptxKey  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 ServiceHot 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 LPDGAPIForce Zurich 5 April  Automation LPDG
APIForce Zurich 5 April Automation LPDG
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress 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 FrameworksBenefits 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 WebDev 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] 2024Advanced 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 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024
 

Frontendと向き合う