SlideShare a Scribd company logo

Riot.jsを用いたweb開発 takusuta tech conf #1

•
Keisuke Imai, profile picture
Keisuke Imai

takusuta tech conf #1 で使用したスライドです。 Riot.jsを使ったweb開発に触れています。

Engineering
1 of 31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Riot.jsを用いたWeb開発 Takusuta TechConf #1 - ライブ配信サービス作ってみた -
INTRODUCTION 自己紹介 > 2015年 CyberAgent 新卒入社 > 学生時代にサンフランシスコ少しだけ留学 > 現在、ライブ配信動画サービス「Takusuta」を立ち上げ、運用中 今井啓介 (KEISUKE IMAI) ENGINEER 株式会社 タクスタ 15年新卒 @ imakei #js #android #node.js ...
キーワード Gulp(Browserify) Riot(←いちおうメイン) Flux Isomorphic(ServerSideRendering) JWPlayer
現在のWEBに行き着くまで 拡散でweb必要じゃね？ React + SPA でさくっと でもこれ重くね？てかSEO弱くね？ くっそ軽くてSEO強いやつあるらしいよ を使おう. ←今ここ
Riot.jsを用いたweb開発 takusuta tech conf #1
Riot A React-like user interface micro-library
Riot ● とにかく軽い ● カスタムタグ ● Isomorphic
WEBの構成
WEBの構成 ー 通常のアクセス APIサーバー Node APIサーバ 配信サーバ ブラウザからのアクセス HTML
WEBの構成 ー Botからのアクセス Node APIサーバ 配信サーバ Botからのアクセス HTML APIサーバー
開発環境
開発環境
ソースコードの構成
ソースコードの構成 frontend backendapp
APP app - FrontendとBackendの共通部分 Component Action Store Utility etc...
フロントエンド
フロントエンド backendfrontend app
フロントエンド Flux
フロントエンド ー Flux ほんとにシンプル https://facebook.github.io/flux/docs/overview.html
フロントエンド コンポーネント
フロントエンド - コンポーネント DOM + Style + Script
フロントエンド - コンポーネント DOM Style Script
フロントエンド - コンポーネント
バックエンド
バックエンド frontend backendapp
バックエンド APIサーバー + HTML配信サーバー （Isomorphic）
バックエンド Isomorphic (サーバサイドレンダリング)
バックエンド - Isomorphic
Player
Player
End

More Related Content

PPTX
サイバーエージェント様 発表「OpenStackのNWと物理の話」
VirtualTech Japan Inc.
 
PPTX
アメーバブログを支えるデータセンターとインフラ技術
Hiroki NAKASHIMA
 
PDF
自動構築と自動テスト〜インフラのコード化とクラウドの優位性
azumakuniyuki 🐈
 
PPTX
DeNAがオンプレでこれからやろうとしてること - OpenStack最新情報セミナー 2015年12月
VirtualTech Japan Inc.
 
PDF
最近Preview公開されたAzure テストサービスを試してみた
Hiroyuki Mori
 
PDF
Spring Boot + Netflix Eureka
心 谷本
 
PPTX
最近のたまおきの取り組み 〜OpenStack+αの実現に向けて〜 - OpenStack最新情報セミナー(2017年3月)
VirtualTech Japan Inc.
 
PPTX
AmebaのOpenStack - OpenStack最新情報セミナー 2015年12月
VirtualTech Japan Inc.
 
サイバーエージェント様 発表「OpenStackのNWと物理の話」
VirtualTech Japan Inc.
 
アメーバブログを支えるデータセンターとインフラ技術
Hiroki NAKASHIMA
 
自動構築と自動テスト〜インフラのコード化とクラウドの優位性
azumakuniyuki 🐈
 
DeNAがオンプレでこれからやろうとしてること - OpenStack最新情報セミナー 2015年12月
VirtualTech Japan Inc.
 
最近Preview公開されたAzure テストサービスを試してみた
Hiroyuki Mori
 
Spring Boot + Netflix Eureka
心 谷本
 
最近のたまおきの取り組み 〜OpenStack+αの実現に向けて〜 - OpenStack最新情報セミナー(2017年3月)
VirtualTech Japan Inc.
 
AmebaのOpenStack - OpenStack最新情報セミナー 2015年12月
VirtualTech Japan Inc.
 

What's hot (20)

PDF
Azure Load Testingを試してみた
Hiroyuki Mori
 
PDF
作って(壊して？)学ぶインターネットのしくみ サイバーエージェントの実験用ASの紹介 / Introduce experimental AS in ...
whywaita
 
PDF
20130719 CDP Night LightningTalk "Internal Port Concentrator"
Kazuki Ueki
 
PDF
Ansible night
kotasaegusa
 
PDF
おれおれブログシステムにServiceWorkerを導入してみた #serviceworker
Toshiaki Maki
 
PDF
テスト駆動で行うネットワーク自動化のすすめ
kinunori
 
PDF
Bicep 入門 MySQL編
Takekazu Omi
 
PDF
Spring Security 5.0 解剖速報
Takuya Iwatsuka
 
PDF
○ヶ月でできた！？さくらのクラウド開発秘話（【ヒカ☆ラボ】さくらインターネットとMilkcocoa！年末イベント：ここだけのウラ話）
さくらインターネット株式会社
 
PPTX
Spring I/O 2017での拡張のお話
Alisa Sasaki
 
PDF
ACI + Ansible
Takehiro Yokoishi
 
PDF
クラウド環境向けZabbixカスタマイズ紹介(第5回Zabbix勉強会)
Daisuke Ikeda
 
PDF
20210925_jazug_azure_what_to_do_first
TomoakiOno
 
PPTX
明日から試せる！ソフトウエアベースストレージ「ScaleIO」のご紹介 - OpenStack最新情報セミナー 2015年9月
VirtualTech Japan Inc.
 
PDF
PerlモジュールをRubyに移植する時に落ちた穴々
azumakuniyuki 🐈
 
PDF
Kubernetesの良さを活かして開発・運用！Cloud Native入門 / An introductory Cloud Native #osc19tk
whywaita
 
PPTX
SpringOne 2015 報告会 - Lattice + Spring Cloud Netflix
Tommy Ludwig
 
PDF
WordBench千葉「レベル別Nginx活用法」
Endoh Shingo
 
PPTX
July Tech Festa 2020 AKSを活用した内製教育支援プラットフォームをリリースした話
Shingo Kawahara
 
PPTX
使ってわかった！現場担当者が語るOpenStack運用管理の課題 - OpenStack最新情報セミナー 2015年2月
VirtualTech Japan Inc.
 
Azure Load Testingを試してみた
Hiroyuki Mori
 
作って(壊して？)学ぶインターネットのしくみ サイバーエージェントの実験用ASの紹介 / Introduce experimental AS in ...
whywaita
 
20130719 CDP Night LightningTalk "Internal Port Concentrator"
Kazuki Ueki
 
Ansible night
kotasaegusa
 
おれおれブログシステムにServiceWorkerを導入してみた #serviceworker
Toshiaki Maki
 
テスト駆動で行うネットワーク自動化のすすめ
kinunori
 
Bicep 入門 MySQL編
Takekazu Omi
 
Spring Security 5.0 解剖速報
Takuya Iwatsuka
 
○ヶ月でできた！？さくらのクラウド開発秘話（【ヒカ☆ラボ】さくらインターネットとMilkcocoa！年末イベント：ここだけのウラ話）
さくらインターネット株式会社
 
Spring I/O 2017での拡張のお話
Alisa Sasaki
 
ACI + Ansible
Takehiro Yokoishi
 
クラウド環境向けZabbixカスタマイズ紹介(第5回Zabbix勉強会)
Daisuke Ikeda
 
20210925_jazug_azure_what_to_do_first
TomoakiOno
 
明日から試せる！ソフトウエアベースストレージ「ScaleIO」のご紹介 - OpenStack最新情報セミナー 2015年9月
VirtualTech Japan Inc.
 
PerlモジュールをRubyに移植する時に落ちた穴々
azumakuniyuki 🐈
 
Kubernetesの良さを活かして開発・運用！Cloud Native入門 / An introductory Cloud Native #osc19tk
whywaita
 
SpringOne 2015 報告会 - Lattice + Spring Cloud Netflix
Tommy Ludwig
 
WordBench千葉「レベル別Nginx活用法」
Endoh Shingo
 
July Tech Festa 2020 AKSを活用した内製教育支援プラットフォームをリリースした話
Shingo Kawahara
 
使ってわかった！現場担当者が語るOpenStack運用管理の課題 - OpenStack最新情報セミナー 2015年2月
VirtualTech Japan Inc.
 
Ad

Similar to Riot.jsを用いたweb開発 takusuta tech conf #1 (6)

PPTX
kichijyojipm17-Riot20190301
Masanobu Shimura
 
PDF
HTML5開発最前線
yoshikawa_t
 
PDF
React+Redux+Node.js+Raspberry Piで ビデオプレイヤーを作りたかった話
Akira Fukuoka
 
PDF
高山ゼミ_河崎勇斗
Hayato Kawasaki
 
PDF
Leading the way to W3C TPAC 2015 『HTML5 関連の API の現状とこれから』
Futomi Hatano
 
PPTX
HTML5とWeb開発に関する最新動向
Shumpei Shiraishi
 
kichijyojipm17-Riot20190301
Masanobu Shimura
 
HTML5開発最前線
yoshikawa_t
 
React+Redux+Node.js+Raspberry Piで ビデオプレイヤーを作りたかった話
Akira Fukuoka
 
高山ゼミ_河崎勇斗
Hayato Kawasaki
 
Leading the way to W3C TPAC 2015 『HTML5 関連の API の現状とこれから』
Futomi Hatano
 
HTML5とWeb開発に関する最新動向
Shumpei Shiraishi
 
Ad

Riot.jsを用いたweb開発 takusuta tech conf #1

Editor's Notes

  • #7: Vue.js 71.44kb
  • #13: Gulp Browserify Riotify Babelify
  • #15: どうしてこーなってる。 →サーバサイドレンダリングするから。
  • #27: APIサーバー本当に単純なものなので省略
  • #28: 最初のweb構成まで戻ってちょこっと説明
  • #31: Video.js オープンソース、管理めんどい。 JWPlayer 待っとけば勝手に機能追加される。 ホスティングされたPlayer使えば本当に一行だけ。 もちろん自分でホストもできる。 Premiumで年$299