Enviar búsqueda
Cargar
Jspmとtypescriptで開発する
•
1 recomendación
•
1,715 vistas
Taketoshi 青野健利
Seguir
Development with jspm and typescript
Leer menos
Leer más
Software
Vista de diapositivas
Denunciar
Compartir
Vista de diapositivas
Denunciar
Compartir
1 de 15
Descargar ahora
Descargar para leer sin conexión
Recomendados
古い?ダサい?まだまだイケルChef!
古い?ダサい?まだまだイケルChef!
Naoto Ishizawa
Flash Playerの作り方
Flash Playerの作り方
Yu Kobayashi
20121019-jenkins-akiko_pusu.pdf
20121019-jenkins-akiko_pusu.pdf
akiko_pusu
日曜プログラマーとigoogle先生
日曜プログラマーとigoogle先生
Yuusuke Takeuchi
プログラムの高速化
プログラムの高速化
東海北陸ロボコン 交流会
非同期系統の基礎
非同期系統の基礎
segayuu
早く家へ帰るための Grunt入門 [+gulp紹介]
早く家へ帰るための Grunt入門 [+gulp紹介]
Masayuki Maekawa
Javaの速度比較
Javaの速度比較
Satoshi Kubo
Recomendados
古い?ダサい?まだまだイケルChef!
古い?ダサい?まだまだイケルChef!
Naoto Ishizawa
Flash Playerの作り方
Flash Playerの作り方
Yu Kobayashi
20121019-jenkins-akiko_pusu.pdf
20121019-jenkins-akiko_pusu.pdf
akiko_pusu
日曜プログラマーとigoogle先生
日曜プログラマーとigoogle先生
Yuusuke Takeuchi
プログラムの高速化
プログラムの高速化
東海北陸ロボコン 交流会
非同期系統の基礎
非同期系統の基礎
segayuu
早く家へ帰るための Grunt入門 [+gulp紹介]
早く家へ帰るための Grunt入門 [+gulp紹介]
Masayuki Maekawa
Javaの速度比較
Javaの速度比較
Satoshi Kubo
俺とGitHub(先行公開ver.)
俺とGitHub(先行公開ver.)
Masayuki KaToH
Gruntの罪と罰
Gruntの罪と罰
kamiyam .
jspmを使ってES6を始めてみよう
jspmを使ってES6を始めてみよう
Takahiro Maki
2011 06-11.koga.osc lt
2011 06-11.koga.osc lt
Shin-ya Koga
Hands on - JetBrains IDE Rider C# 00-Preparation r01.01
Hands on - JetBrains IDE Rider C# 00-Preparation r01.01
YouheiYamada
Ha4goもくもく報告2016年11月分
Ha4goもくもく報告2016年11月分
Masayuki KaToH
プログラマのためのPC自動化
プログラマのためのPC自動化
高見 知英
第二回 クラウドサーバー管理者若葉の会
第二回 クラウドサーバー管理者若葉の会
masayoshi shiraishi
俺と Amazon Elasticsearch Service とスポットインスタンス
俺と Amazon Elasticsearch Service とスポットインスタンス
Masayuki KaToH
第5回アドオンモジュールセミナー発表資料
第5回アドオンモジュールセミナー発表資料
oreno
俺とプログラミング教育
俺とプログラミング教育
Masayuki KaToH
俺とGitHub
俺とGitHub
Masayuki KaToH
Cmsプロレス#3 lt資料 超土壇場でインフラエンジニアがあがいた記録
Cmsプロレス#3 lt資料 超土壇場でインフラエンジニアがあがいた記録
Kei Mikage
JSでファミコンエミュレータを作った時の話
JSでファミコンエミュレータを作った時の話
sairoutine
JS と Canvas で作るシューティングゲーム
JS と Canvas で作るシューティングゲーム
sairoutine
うわ…私のEmacs力、低すぎ...?
うわ…私のEmacs力、低すぎ...?
Masahiro Sano
今日から始めるLaravel
今日から始めるLaravel
Masaru Matsuo
自ら肥え太る執事を現場に入れてみた
自ら肥え太る執事を現場に入れてみた
Kazuhito Miura
Touhou Project on JavaScript
Touhou Project on JavaScript
sairoutine
読みやすいプログラム、書き換えやすいプログラム
読みやすいプログラム、書き換えやすいプログラム
amusementcreators
React and-rx
React and-rx
Taketoshi 青野健利
ユーザ体験ゼミ
ユーザ体験ゼミ
Leonardo Ken Orihara
Más contenido relacionado
La actualidad más candente
俺とGitHub(先行公開ver.)
俺とGitHub(先行公開ver.)
Masayuki KaToH
Gruntの罪と罰
Gruntの罪と罰
kamiyam .
jspmを使ってES6を始めてみよう
jspmを使ってES6を始めてみよう
Takahiro Maki
2011 06-11.koga.osc lt
2011 06-11.koga.osc lt
Shin-ya Koga
Hands on - JetBrains IDE Rider C# 00-Preparation r01.01
Hands on - JetBrains IDE Rider C# 00-Preparation r01.01
YouheiYamada
Ha4goもくもく報告2016年11月分
Ha4goもくもく報告2016年11月分
Masayuki KaToH
プログラマのためのPC自動化
プログラマのためのPC自動化
高見 知英
第二回 クラウドサーバー管理者若葉の会
第二回 クラウドサーバー管理者若葉の会
masayoshi shiraishi
俺と Amazon Elasticsearch Service とスポットインスタンス
俺と Amazon Elasticsearch Service とスポットインスタンス
Masayuki KaToH
第5回アドオンモジュールセミナー発表資料
第5回アドオンモジュールセミナー発表資料
oreno
俺とプログラミング教育
俺とプログラミング教育
Masayuki KaToH
俺とGitHub
俺とGitHub
Masayuki KaToH
Cmsプロレス#3 lt資料 超土壇場でインフラエンジニアがあがいた記録
Cmsプロレス#3 lt資料 超土壇場でインフラエンジニアがあがいた記録
Kei Mikage
JSでファミコンエミュレータを作った時の話
JSでファミコンエミュレータを作った時の話
sairoutine
JS と Canvas で作るシューティングゲーム
JS と Canvas で作るシューティングゲーム
sairoutine
うわ…私のEmacs力、低すぎ...?
うわ…私のEmacs力、低すぎ...?
Masahiro Sano
今日から始めるLaravel
今日から始めるLaravel
Masaru Matsuo
自ら肥え太る執事を現場に入れてみた
自ら肥え太る執事を現場に入れてみた
Kazuhito Miura
Touhou Project on JavaScript
Touhou Project on JavaScript
sairoutine
読みやすいプログラム、書き換えやすいプログラム
読みやすいプログラム、書き換えやすいプログラム
amusementcreators
La actualidad más candente
(20)
俺とGitHub(先行公開ver.)
俺とGitHub(先行公開ver.)
Gruntの罪と罰
Gruntの罪と罰
jspmを使ってES6を始めてみよう
jspmを使ってES6を始めてみよう
2011 06-11.koga.osc lt
2011 06-11.koga.osc lt
Hands on - JetBrains IDE Rider C# 00-Preparation r01.01
Hands on - JetBrains IDE Rider C# 00-Preparation r01.01
Ha4goもくもく報告2016年11月分
Ha4goもくもく報告2016年11月分
プログラマのためのPC自動化
プログラマのためのPC自動化
第二回 クラウドサーバー管理者若葉の会
第二回 クラウドサーバー管理者若葉の会
俺と Amazon Elasticsearch Service とスポットインスタンス
俺と Amazon Elasticsearch Service とスポットインスタンス
第5回アドオンモジュールセミナー発表資料
第5回アドオンモジュールセミナー発表資料
俺とプログラミング教育
俺とプログラミング教育
俺とGitHub
俺とGitHub
Cmsプロレス#3 lt資料 超土壇場でインフラエンジニアがあがいた記録
Cmsプロレス#3 lt資料 超土壇場でインフラエンジニアがあがいた記録
JSでファミコンエミュレータを作った時の話
JSでファミコンエミュレータを作った時の話
JS と Canvas で作るシューティングゲーム
JS と Canvas で作るシューティングゲーム
うわ…私のEmacs力、低すぎ...?
うわ…私のEmacs力、低すぎ...?
今日から始めるLaravel
今日から始めるLaravel
自ら肥え太る執事を現場に入れてみた
自ら肥え太る執事を現場に入れてみた
Touhou Project on JavaScript
Touhou Project on JavaScript
読みやすいプログラム、書き換えやすいプログラム
読みやすいプログラム、書き換えやすいプログラム
Destacado
React and-rx
React and-rx
Taketoshi 青野健利
ユーザ体験ゼミ
ユーザ体験ゼミ
Leonardo Ken Orihara
p5.js について
p5.js について
reona396
Glibc malloc internal
Glibc malloc internal
Motohiro KOSAKI
Curriculum Guide For Grant Writing Boot Camp
Curriculum Guide For Grant Writing Boot Camp
Dr. Beverly A. Browning
Lever's Customer Love Day 2017
Lever's Customer Love Day 2017
Lever Inc.
R. Villano - Las foto (ES - p.10)
R. Villano - Las foto (ES - p.10)
Raimondo Villano
Slide share
Slide share
HugoDenver
DIY Haunted House Project - University of Houston-Downtown
DIY Haunted House Project - University of Houston-Downtown
Crystal Guliford
Customer marketing in a digital world
Customer marketing in a digital world
Anoushka Gangji
Conceptos básicos. Seminario web 1: Introducción a NoSQL
Conceptos básicos. Seminario web 1: Introducción a NoSQL
MongoDB
영어로 논문쓰기 - 읽기 쓰기 통합 전략을 중심으로
영어로 논문쓰기 - 읽기 쓰기 통합 전략을 중심으로
Sungwoo Kim
El Nuevo Testamento fue escrito originalmente en hebreo.
El Nuevo Testamento fue escrito originalmente en hebreo.
antso
The data deluge: Five years on
The data deluge: Five years on
The Economist Media Businesses
Dgc 17 03_24_corporate presentation
Dgc 17 03_24_corporate presentation
DetourGold
ぱぱっと理解するSpring Cloudの基本
ぱぱっと理解するSpring Cloudの基本
kazuki kumagai
Mini maratona proposta fine aprile 2017
Mini maratona proposta fine aprile 2017
Maurizio Palomba
The 12 Dimensions of Motivational Affordances
The 12 Dimensions of Motivational Affordances
Gustavo Tondello
POEMAS PARA INFANTIL Y PRIMARIA
POEMAS PARA INFANTIL Y PRIMARIA
Lourdes Giraldo Vargas
Divine Sight 3
Divine Sight 3
Sam Hager
Destacado
(20)
React and-rx
React and-rx
ユーザ体験ゼミ
ユーザ体験ゼミ
p5.js について
p5.js について
Glibc malloc internal
Glibc malloc internal
Curriculum Guide For Grant Writing Boot Camp
Curriculum Guide For Grant Writing Boot Camp
Lever's Customer Love Day 2017
Lever's Customer Love Day 2017
R. Villano - Las foto (ES - p.10)
R. Villano - Las foto (ES - p.10)
Slide share
Slide share
DIY Haunted House Project - University of Houston-Downtown
DIY Haunted House Project - University of Houston-Downtown
Customer marketing in a digital world
Customer marketing in a digital world
Conceptos básicos. Seminario web 1: Introducción a NoSQL
Conceptos básicos. Seminario web 1: Introducción a NoSQL
영어로 논문쓰기 - 읽기 쓰기 통합 전략을 중심으로
영어로 논문쓰기 - 읽기 쓰기 통합 전략을 중심으로
El Nuevo Testamento fue escrito originalmente en hebreo.
El Nuevo Testamento fue escrito originalmente en hebreo.
The data deluge: Five years on
The data deluge: Five years on
Dgc 17 03_24_corporate presentation
Dgc 17 03_24_corporate presentation
ぱぱっと理解するSpring Cloudの基本
ぱぱっと理解するSpring Cloudの基本
Mini maratona proposta fine aprile 2017
Mini maratona proposta fine aprile 2017
The 12 Dimensions of Motivational Affordances
The 12 Dimensions of Motivational Affordances
POEMAS PARA INFANTIL Y PRIMARIA
POEMAS PARA INFANTIL Y PRIMARIA
Divine Sight 3
Divine Sight 3
Similar a Jspmとtypescriptで開発する
GruntでJavaScript 前作業の自動化!
GruntでJavaScript 前作業の自動化!
leverages_event
研究生のためのC++ no.7
研究生のためのC++ no.7
Tomohiro Namba
Javaで1から10まで書いた話(sanitized)
Javaで1から10まで書いた話(sanitized)
Tokuhiro Matsuno
Pythonによる並列プログラミング -GPGPUも-
Pythonによる並列プログラミング -GPGPUも-
Yusaku Watanabe
最近流行りのビルドツールとは
最近流行りのビルドツールとは
Takahiro Maki
今流行りのウェブアプリ開発環境Yeoman
今流行りのウェブアプリ開発環境Yeoman
tomo_masakura
MTプラグイン入門以前
MTプラグイン入門以前
Hiroshi Yamato
Ad stirの裏側
Ad stirの裏側
Seiji Ochiai
企業におけるSpring@日本springユーザー会20090624
企業におけるSpring@日本springユーザー会20090624
Yusuke Suzuki
あなたの安心を高速に守る Container-based CI
あなたの安心を高速に守る Container-based CI
Wataru MIYAGUNI
コンピュータビジョン 1章
コンピュータビジョン 1章
motimune
全部入り!WGPで高速JavaScript+HML5体験
全部入り!WGPで高速JavaScript+HML5体験
AdvancedTechNight
ゆるかわPhp
ゆるかわPhp
Ryota Mochizuki
ネットワーク自動化ツール紹介(Ansible・NAPALM編)
ネットワーク自動化ツール紹介(Ansible・NAPALM編)
akira6592
誰にでもできるパフォーマンスチューニング
誰にでもできるパフォーマンスチューニング
Kiyokazu Kaba
Chainerで学ぶdeep learning
Chainerで学ぶdeep learning
Retrieva inc.
TotalViewを使ったFOCUSスパコンでのデバッグ体験 2016
TotalViewを使ったFOCUSスパコンでのデバッグ体験 2016
RWSJapan
#jjug_ccc #ccc_f1 広告システム刷新の舞台裏 - PHPからJavaに変えてみました
#jjug_ccc #ccc_f1 広告システム刷新の舞台裏 - PHPからJavaに変えてみました
Yahoo!デベロッパーネットワーク
メタプログラミングって何だろう
メタプログラミングって何だろう
Kota Mizushima
BotとWikiを使った試験的な並列プログラミング
BotとWikiを使った試験的な並列プログラミング
Takashi Yamanoue
Similar a Jspmとtypescriptで開発する
(20)
GruntでJavaScript 前作業の自動化!
GruntでJavaScript 前作業の自動化!
研究生のためのC++ no.7
研究生のためのC++ no.7
Javaで1から10まで書いた話(sanitized)
Javaで1から10まで書いた話(sanitized)
Pythonによる並列プログラミング -GPGPUも-
Pythonによる並列プログラミング -GPGPUも-
最近流行りのビルドツールとは
最近流行りのビルドツールとは
今流行りのウェブアプリ開発環境Yeoman
今流行りのウェブアプリ開発環境Yeoman
MTプラグイン入門以前
MTプラグイン入門以前
Ad stirの裏側
Ad stirの裏側
企業におけるSpring@日本springユーザー会20090624
企業におけるSpring@日本springユーザー会20090624
あなたの安心を高速に守る Container-based CI
あなたの安心を高速に守る Container-based CI
コンピュータビジョン 1章
コンピュータビジョン 1章
全部入り!WGPで高速JavaScript+HML5体験
全部入り!WGPで高速JavaScript+HML5体験
ゆるかわPhp
ゆるかわPhp
ネットワーク自動化ツール紹介(Ansible・NAPALM編)
ネットワーク自動化ツール紹介(Ansible・NAPALM編)
誰にでもできるパフォーマンスチューニング
誰にでもできるパフォーマンスチューニング
Chainerで学ぶdeep learning
Chainerで学ぶdeep learning
TotalViewを使ったFOCUSスパコンでのデバッグ体験 2016
TotalViewを使ったFOCUSスパコンでのデバッグ体験 2016
#jjug_ccc #ccc_f1 広告システム刷新の舞台裏 - PHPからJavaに変えてみました
#jjug_ccc #ccc_f1 広告システム刷新の舞台裏 - PHPからJavaに変えてみました
メタプログラミングって何だろう
メタプログラミングって何だろう
BotとWikiを使った試験的な並列プログラミング
BotとWikiを使った試験的な並列プログラミング
Más de Taketoshi 青野健利
ServiceWorkerとES6 Modules時代のTypescript開発考察
ServiceWorkerとES6 Modules時代のTypescript開発考察
Taketoshi 青野健利
javascriptのデータ構造の話
javascriptのデータ構造の話
Taketoshi 青野健利
V8 javascript engine for フロントエンドデベロッパー
V8 javascript engine for フロントエンドデベロッパー
Taketoshi 青野健利
非同期javascriptの過去と未来
非同期javascriptの過去と未来
Taketoshi 青野健利
仮想DOMの実装とパフォーマンス
仮想DOMの実装とパフォーマンス
Taketoshi 青野健利
JavascriptのGC入門
JavascriptのGC入門
Taketoshi 青野健利
V8 Iginition Interpreter
V8 Iginition Interpreter
Taketoshi 青野健利
GraphQL with React
GraphQL with React
Taketoshi 青野健利
WebWorker and Atomics
WebWorker and Atomics
Taketoshi 青野健利
Más de Taketoshi 青野健利
(9)
ServiceWorkerとES6 Modules時代のTypescript開発考察
ServiceWorkerとES6 Modules時代のTypescript開発考察
javascriptのデータ構造の話
javascriptのデータ構造の話
V8 javascript engine for フロントエンドデベロッパー
V8 javascript engine for フロントエンドデベロッパー
非同期javascriptの過去と未来
非同期javascriptの過去と未来
仮想DOMの実装とパフォーマンス
仮想DOMの実装とパフォーマンス
JavascriptのGC入門
JavascriptのGC入門
V8 Iginition Interpreter
V8 Iginition Interpreter
GraphQL with React
GraphQL with React
WebWorker and Atomics
WebWorker and Atomics
Jspmとtypescriptで開発する
1.
jspm+typescript で開発する
2.
名前: @brn (青野健利) 職業:
フロントエンドエンジニア・ネイティブエンジニア 会社: Cyberagent アドテクスタジオ RightSegment・AI Messenger ブログ: http://brn-log.hatenablog.com/
3.
What is jspm? ブラウザ向けのモジュール管理ツール ES6
Moduleを利用してランタイムでトランスパイルを行う cliも用意されており、npmのようにモジュールのinstallも可能
4.
What is jspm? Pros •
watch等のジョブが不要 • npm・jspm・githubからインストールできる Cons • jspm_packagesというディレクトリを管理しなければいけない • 常に再コンパイルするのでメモリ負荷が大きい
5.
How dose it
works? Systemjsのtranspilerという仕組みを利用する。 現在の所、typescriptとbabel、traceurが選択できる。
6.
How to use? jspm init moduleのインストール jspm.config.jsの初期化 jspm install <repo>:<module名>
7.
How to use? SystemJS.config({ paths: { "npm:": "jspm_packages/npm/", "test-package/": "src/" }, browserConfig: { "baseURL": "/" }, devConfig: { "map": { "plugin-babel": "npm:systemjs-plugin-babel@0.0.18" } }, transpiler: "plugin-babel", packages: { "test-package": { "main": "test-package.js", "meta": { "*.js": { "loader": "plugin-babel" } } } } }); SystemJS.config({ packageConfigPaths: [ "npm:@*/*.json", "npm:*.json" ], map: {}, packages: {} });
8.
With Typescript jspm install ts compiler optionの設定 plugin-typescriptを使う typescriptOptions: { "tsconfig": true, "typeCheck": ‘strict’ }
9.
With Typescript { “module”: “system” } tsconfig.json
10.
With Typescript そのままブラウザで画面をチェック!
11.
With Typescript typescriptでimportしたmoduleがsystemjs経由でロードされる
12.
With Typescript Sourcemapsも勝手に生成してくれる!
13.
Impressions 使い勝手は良い。 typescriptを書いて、コンパイルするフェーズが無いので、 ブラウザで直接typescriptを実行している感覚 一度設定してしまえば、開発するときには コードを書く => ブラウザをリロードする の流れで通常のJSを書いていた頃の感覚で作業できる。 またkarmaのプラグインもあるので、テストでも利用できる。
14.
Impressions ただし、ブラウザ上で • 依存モジュールのロード • ロードしたモジュールのコンパイル と少々負荷のかかる事を行うので、規模が大きくなってくると 非常にリロードに時間がかかるようになる。 特にnpmのモジュールを使っていると、 稀に依存が非常に多いモジュール等があり、 そういうものをロードすると 一気にストレスがたまる開発環境になってしまう。
15.
Adopt or Hold? 使う分にはwebpack、browserifyに移行するのもそんなに難しくないので、 チャレンジしても問題ない。 特にtypescriptやbabelを利用する場合は出力するモジュール形式を 柔軟に変更できるため、どのモジュール管理システムを利用しても 移行・復帰共にあまり気にせず使うべき。 とりあえず、小・中規模程度のアプリにはjspmはかなり楽なのでおすすめ。
Descargar ahora