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
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
730
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
220
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
170
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
2.1k
AIともっと楽するE2Eテスト
myohei
6
2.6k
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
550
Deep Dive into ~/.claude/projects
hiragram
14
2.6k
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
110
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
12
4.5k
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Code Review Best Practice
trishagee
69
18k
Thoughts on Productivity
jonyablonski
69
4.7k
Six Lessons from altMBA
skipperchong
28
3.9k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
How to Ace a Technical Interview
jacobian
278
23k
Git: the NoSQL Database
bkeepers
PRO
430
65k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
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 关注我们