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
520
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
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
20
11k
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
🔨 小さなビルドシステムを作る
momeemt
3
670
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
100
testingを眺める
matumoto
1
130
オープンセミナー2025@広島「君はどこで動かすか?」アンケート結果
satoshi256kbyte
0
260
AIコーディングAgentとの向き合い方
eycjur
0
260
TanStack DB ~状態管理の新しい考え方~
bmthd
2
490
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
4
2.4k
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
1.8k
1から理解するWeb Push
dora1998
7
1.8k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
280
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
53
7.8k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
The Cult of Friendly URLs
andyhume
79
6.6k
Building Adaptive Systems
keathley
43
2.7k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Code Reviewing Like a Champion
maltzj
525
40k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
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 关注我们