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

From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)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 Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi 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...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 TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoffsammart93
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna 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...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?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 FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherRemote DBA Services
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century educationjfdjdjcjdnsjd
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdflior mazor
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 
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 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  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...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 ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1
 

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 AutomationFrom 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)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 Men08448380779 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...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 TakeoffStrategize 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 ScriptAutomating 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 RobisonData 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...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?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 FresherStrategies 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 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI 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.pptx04-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 2024The 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 slideHistor 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   🐘🐬  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...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 ProcessorsExploring 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.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 

Frontendと向き合う