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
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
110
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.3k
はじめてのMaterial3 Expressive
ym223
2
900
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
2.1k
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
3
260
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.3k
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.5k
Improving my own Ruby thereafter
sisshiki1969
1
160
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
2.5k
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
22
5.9k
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
4.3k
Kiroで始めるAI-DLC
kaonash
2
630
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Automating Front-end Workflow
addyosmani
1370
200k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
BBQ
matthewcrist
89
9.8k
Embracing the Ebb and Flow
colly
87
4.8k
How GitHub (no longer) Works
holman
315
140k
Balancing Empowerment & Direction
lara
3
630
A Tale of Four Properties
chriscoyier
160
23k
The Cult of Friendly URLs
andyhume
79
6.6k
Fireside Chat
paigeccino
39
3.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 关注我们