Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
How to build an online IDE with React
Search
hui.liu
July 12, 2015
Programming
0
510
How to build an online IDE with React
A talk given at ShenJS 2015
hui.liu
July 12, 2015
Tweet
Share
More Decks by hui.liu
See All by hui.liu
Redux and React Server Rendering
hulufei
1
110
利用Grunt打造前端工作流
hulufei
5
1.2k
Other Decks in Programming
See All in Programming
What's new in AppKit on macOS 26
1024jp
0
150
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
3
580
生成AI時代のコンポーネントライブラリの作り方
touyou
1
290
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
190
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
610
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
260
NPOでのDevinの活用
codeforeveryone
0
900
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
13k
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
170
可変変数との向き合い方 $$変数名が踊り出す$$ / php conference Variable variables
gunji
0
180
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
680
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
1.1k
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
The World Runs on Bad Software
bkeepers
PRO
70
11k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Optimizing for Happiness
mojombo
379
70k
Building Adaptive Systems
keathley
43
2.7k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Adopting Sorbet at Scale
ufuk
77
9.5k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
How STYLIGHT went responsive
nonsquared
100
5.6k
Transcript
React 应⽤用实践 Coding · WebIDE
刘辉 (@hulufei)
None
React Flux Karma
Components
<Terminal /> <Editor /> <Tree /> <StatusBar /> <Menu />
<EnvSettings /> <Tab />
<WebIDE /> var App = React.createClass({ render: function() { return
( <div> <Menu /> <Tree /> ... </div> ) } }) JSX var Menu = React.createClass(...) var Tree = React.createClass(...) // ...
React + Flux
Flux Store Action View emitChange call Dispatcher
None
<SettingModal />
<Editor />
Editor Settings SettingStore <SettingModal /> <Editor /> SettingActions save emitChange
Addons Core (Flux) Addons Actions Bridge window.cide = require: (action)
-> require '../actions/' + action
Async Requests • Reads • Writes
Reads Store Components Promise Server get API Layer Store.getData() request.get(url)
.catch(errorAction)
Writes Action Components Server post/put API Layer Action.update() request.post(url).catch(errorAction)
Writing Testable JavaScript is hard, once
Writing Testable JavaScript Loose Coupling
Testing Flux Application • Testing Stores • Testing Components
Tools • Karma as test runner • Mocha as test
framework • Sinon as test mocks • Chai as assertion library • Rewire as dependency injection + https://github.com/hulufei/karma-react-boilerplate
Testing Stores • Data persistency • Dispatch actions
beforeEach -> sinon.spy AppDispatcher, 'register' @callback = AppDispatcher.register.args[0][0] rewire =
require 'rewire' # Test cases fakeAction = { actionType: 'ACTION_TYPE' } @callback fakeAction expect(@store.getData()).to.be.equal 'something' # Reset data @store = rewire '../stores/SomeStore' @store.__set__ '_data', 'fake store data'
–http://martinfowler.com/articles/asyncJS.html “Aggressively limit the number of truly asynchronous tests you
write and maintain.” Testing Async Requests
Store API Layer Actions API Layer Testing Async Requests •
Stub API Layer • Use Promise
Stub API API = require './utils/api' stub = sinon.stub API,
'fetch' stub.returns(Promise.resolve fakedResponse) expect(stub).to.be.calledOnce expect(data).to.eql fakedResponse stub.returns(Promise.reject 'fake error') expect(data).to.be.rejected data = Store.getData()
Testing Components • DOM verify • DOM events simulate
React = require 'react/addons' ContextMenu = require '../index' TestUtils =
React.addons.TestUtils describe 'ContextMenu', -> beforeEach -> ContextMenuElement = React.createElement ContextMenu @contextMenuComponent = TestUtils.renderIntoDocument ContextMenuElement @el = React.findDOMNode @contextMenuComponent it 'should render empty context menu', -> expect(@el.className).to.contain 'context-menu' expect(@el.className).to.contain 'hide' it 'should invoke callback on menu close', -> closeSpy = sinon.spy() ContextMenuElement = React.createElement ContextMenu, onMenuClose: closeSpy component = TestUtils.renderIntoDocument ContextMenuElement el = React.findDOMNode component TestUtils.Simulate.blur el expect(closeSpy).to.called.once beforeEach -> ContextMenuElement = React.createElement ContextMenu @contextMenuComponent = TestUtils.renderIntoDocument ContextMenuElement TestUtils.Simulate.blur el expect(closeSpy).to.called.once TestUtils = React.addons.TestUtils React = require 'react/addons' expect(@el.className).to.contain 'context-menu' expect(@el.className).to.contain 'hide'
Awesome React • Immutable.js • Server side rendering • React
styling • Relay and GraphQL • …
Q&A 关注我们