"Technical Challenges behind Visual IDE for React Components" Tetiana Mandziuk
0 likes155 views
The document details the technical challenges and solutions in developing a visual IDE for React components at Wix, with a focus on creating a pluggable architecture that supports collaboration between designers and developers. Key challenges addressed include tight coupling of features, code analysis and generation, data synchronization, and code compilation. The summary outlines how the architecture enhances performance, allows for custom functionality, and integrates various environments for efficient development.
![FileExplorerFeature
FSService.createFile
(‘component.tsx’);
FSFeature
class FSService {
createFile(…) { }
}
send({
service: ‘FSService’,
method: ‘createFile’,
args: [‘component.tsx’]
});
onMessage(data => {
const service = getService(data.service);
service[data.method](data.args);
});
Engine
WebSocket
Communication
Pluggable
Architecture](https://image.slidesharecdn.com/wcsjsframeworksdaysnew-210608105207/85/Technical-Challenges-behind-Visual-IDE-for-React-Components-Tetiana-Mandziuk-23-320.jpg)
![{
kind: SyntaxKind.ObjectLiteralExpression,
properties: [
{
kind: SyntaxKind.PropertyAssignment,
name: {
kind: SyntaxKind.Identifier,
escapedText: "rating",
pos: 2,
end: 9,
flags: 0,
originalKeywordKind: undefined
},
initializer: {
kind: SyntaxKind.NumericLiteral,
text: "4",
pos: 10,
end: 12,
flags: 0,
questionToken: undefined,
exclamationToken: undefined
},
pos: 2,
end: 12,
flags: 0,
decorators: undefined,
modifiers: undefined
}
],
pos: 1,
end: 14,
flags: 0
}
{
kind: 'object',
properties: [
{
kind: 'property',
name: {
kind: 'string',
value: 'rating'
},
initializer: {
kind: 'number',
value: 4
}
}
]
}
Simple AST is a simplified version of native AST
Typescript AST Simple AST
➞](https://image.slidesharecdn.com/wcsjsframeworksdaysnew-210608105207/85/Technical-Challenges-behind-Visual-IDE-for-React-Components-Tetiana-Mandziuk-29-320.jpg)
"Technical Challenges behind Visual IDE for React Components" Tetiana Mandziuk
- 2. Technical Challenges behind Visual IDE for React Components Tetiana Mandziuk [email protected] https://www.wixcomponentstudio.com/
- 3. Introduction
- 4. Tetiana Mandziuk — FE developer @ Wix — 10+ years of experience — A scientific researcher, lecturer, and UI/UX designer in the past
- 5. Agenda What is Wix Components Studio? Technical Challenges — Pluggable Architecture — Code Analysis & Generation — Data Synchronization — Code Compilation & Execution
- 6. What is Wix Components Studio? 01
- 7. Designer and Developer Collaboration ● State ● Styles ● Behaviour ● Platform ● etc.
- 8. Visual IDE for React components that enables collaboration of designers and developers in the source code environment
- 9. Demo Time!
- 11. Enable multiple teams to build one editor that is performant, easily extendable, multi-environment
- 13. Issues from the Past Pluggable Architecture — Tight coupling between features of the application — Difficult integration of new functionality — Team boundaries are not reflected in the code — Challenge to maintain a growing codebase
- 14. Addressing Issues from the Past Include or exclude parts of the application Avoid tight coupling between the parts of the application Speed-up development process of isolated parts of the application Allow both internal and external engineers to add custom functionality Pluggable Architecture Support multiple environments, i.e. browser, web workers, Node.js </>
- 17. Git Pluggable Architecture Not compiled Not included in the bundle
- 18. Engine provides runtime abstractions for creating multi-environment web applications https://github.com/wixplosives/engine
- 19. Engine Provides communication between features in different environments Defines pluggable features and dependencies between them Allows a feature to expose its API through services Initializes the application by building features dependency graph, performs compiling, bundling, and application start Defines slots, a way for features to provide another feature data Pluggable Architecture
- 20. Environments Browser: user interface Node.js: file system access and code compilation Web workers: off-main-thread computations iframes: component simulations rendering Pluggable Architecture
- 21. Cross-Environment Feature, e.g. Git Shortcuts Feature Compilation Feature Environments Pluggable Architecture
- 22. Engine provides unified API for communication between environments
- 23. FileExplorerFeature FSService.createFile (‘component.tsx’); FSFeature class FSService { createFile(…) { } } send({ service: ‘FSService’, method: ‘createFile’, args: [‘component.tsx’] }); onMessage(data => { const service = getService(data.service); service[data.method](data.args); }); Engine WebSocket Communication Pluggable Architecture
- 25. Code Analysis & Generation
- 26. Visual Code Editing Source file ★★★★☆ Properties Panel Rendering Abstract Syntax Tree Code Analysis & Generation
- 27. Abstract Syntax Tree a tree representation of the abstract syntactic structure of source code written in a programming language
- 28. Typescript AST { rating: 4 } https://ts-ast-viewer.com/ Code Analysis & Generation
- 29. { kind: SyntaxKind.ObjectLiteralExpression, properties: [ { kind: SyntaxKind.PropertyAssignment, name: { kind: SyntaxKind.Identifier, escapedText: "rating", pos: 2, end: 9, flags: 0, originalKeywordKind: undefined }, initializer: { kind: SyntaxKind.NumericLiteral, text: "4", pos: 10, end: 12, flags: 0, questionToken: undefined, exclamationToken: undefined }, pos: 2, end: 12, flags: 0, decorators: undefined, modifiers: undefined } ], pos: 1, end: 14, flags: 0 } { kind: 'object', properties: [ { kind: 'property', name: { kind: 'string', value: 'rating' }, initializer: { kind: 'number', value: 4 } } ] } Simple AST is a simplified version of native AST Typescript AST Simple AST ➞
- 30. Typescript AST { kind: SyntaxKind.PrefixUnaryExpression, operator: SyntaxKind.MinusToken, operand: { kind: SyntaxKind.NumericLiteral, text: '42' } } Simple AST ➞ { kind: 'number', value: -42 } const x = -42; Conversion includes native AST nodes simplification
- 31. Simple AST Core Attributes Lossy format: recomputation back to native AST is not possible Language-agnostic: works for Typescript, CSS, etc. Metadata: relationship between Simple AST and native AST nodes Code Analysis & Generation
- 32. let componentProps = { rating: 4 }; simulation.tsx TypeScript AST Simple AST Parse Simple AST change: { astNodeId: ‘p17’, type: ‘number’, value: 5 } convert() applyChanges() sync recomputeBack() compute() applyString ChangesToFile() Optimistic update
- 33. Code Analysis & Generation Summary: SimpleAST
- 35. let componentProps = { rating: 4 }; simulation.tsx TypeScript AST Simple AST Parse Simple AST change: { astNodeId: ‘p17’, type: ‘number’, value: 5 } convert() sync applyChanges() recomputeBack() compute() applyString ChangesToFile() Optimistic update
- 36. Resource a store that represents a piece of immutable data It allows to create a new version of the data and manages subscriptions to updates
- 37. Resources Core Attributes Built-in synchronization mechanism between environments Allows batching, i.e. performing multiple changes in a single event Supports transactions Allows versioning and snapshot creation / disposal Data Synchronization Supports any serializable types of data
- 38. Resource, e.g. file Syncer Syncer sync Resource Created one per each environment Resources support variety of unique synchronization strategies One way strategy
- 39. Resource, e.g. file Syncer Syncer Resource sync Created one per each environment Two way strategy
- 40. let componentProps = { rating: 4 }; simulation.tsx TypeScript AST Simple AST Parse Simple AST change: { astNodeId: ‘p17’, type: ‘number’, value: 5 } convert() applyChanges() recomputeBack() compute() applyString ChangesToFile() Optimistic update sync
- 41. File Resource simulation.tsx TypeScript AST Simple AST Resource Simple AST Resource sync One way computed strategy One way computed strategy One way computed strategy
- 42. File Resource simulation.tsx TypeScript AST Simple AST Resource Simple AST Resource change: { astNodeId: ‘p17’, type: ‘number’, value: 5 } Resource. applyChanges() sync Two way computed strategy Two way computed strategy Two way computed strategy
- 44. Code Compilation
- 45. Compilation Visual Code Editing Source file ★★★★☆ Properties Panel Rendering Abstract Syntax Tree Code Compilation
- 46. Traditional Compiling / Bundling Transpiles the .ts file into .js, styles (.scss, .st.css, etc.) into .css Leverages module bundlers (Webpack) and compilers (tsc, SASS) Code Compilation Create bundle
- 47. Compiling for WCS We don’t want users to configure their bundlers for WCS Support compilation in static online version of WSC, but webpack works in node. WCS does not want to limit ourselves to support projects using specific bundlers Code Compilation All entry points in webpack should be configured ahead of time
- 48. WCS Vision Compile simulations dynamically just-in-time in browser
- 49. Code Execution Runs code without bundling it Prepares transpiled code for evaluation in a browser Uses custom CommonJS module system implementation that works in browser Code Compilation
- 50. let componentProps = { rating: 4 }; simulation.tsx TypeScript AST Simple AST Parse Simple AST change: { astNodeId: ‘p17’, type: ‘number’, value: 5 } convert() applyChanges() recomputeBack() compute() applyString ChangesToFile() Optimistic update sync
- 51. Execution Resource sync Names of the files + compiled source code CommonJS Modules System Uses Execution Resource instead of File System Recursive evaluation of simulation file and dependencies Rendered Simulation Execution Resource Dependency Resource Compilation Resource Providing a graph of dependencies by deep analysis of ASTs Transpiling source code by using dedicated compilers Names of the files + compiled source code Simulation Entry Point simulation.tsx
- 52. Code Compilation Summary: Code Execution
- 53. Summary: Technical Challenges — Pluggable Architecture — Code Analysis & Generation — Data Synchronization — Code Compilation & Execution
- 58. Assets Database Security Application Developer Developer Browser Code Network Network Network Copy Tools Library Library Library Dependency Dependency Client Server Pros Pros Cons Cons Error Error Error Monitor Bug Bug Search Search User Team API Design Design Log in Keyboard Request Open Source Web Message Domain
- 59. You can write here a long quote with an important message
- 60. You can write here short quote
- 61. Small Title Before Bullets INSERT YOUR TOPIC NAME — This is bullet no’ 1 — This is the second bullet — And that’s the third — This is bullet no’ 4
- 62. You don’t have to have a title INSERT YOUR TOPIC NAME
- 63. You don’t have to have a title INSERT YOUR TOPIC NAME
- 65. Just Some Title Above The Bullets — This is bullet no’ 1 — This is the second bullet — And that’s the third — This is bullet no’ 4 — And no’ ih here INSERT YOUR TOPIC NAME
- 66. Just Some Title Above The Bullets — This is bullet no’ 1 — This is the second bullet — And that’s the third — This is bullet no’ 4 — And no’ 5 is here INSERT YOUR TOPIC NAME
- 69. Title Above Paragraph I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you. This is a great space to write long text about your company and your services. You can use this space to go into a little more detail about your company. INSERT YOUR TOPIC NAME
- 70. Title Above Paragraph I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you. This is a great space to write long text about your company and your services. You can use this space to go into a little more detail about your company. INSERT YOUR TOPIC NAME
- 71. Title Above Paragraph I'm a subtitle I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you. I'm a subtitle This is a great space to write long text about your company and your services. You can use this space to go into a little more detail about your company. Talk about your team and what services you provide. Tell your visitors the story of how you came up with the idea for your business and what makes you different from your competitors. INSERT YOUR TOPIC NAME
- 72. Title Above Paragraph I'm a subtitle I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you. I'm a subtitle This is a great space to write long text about your company and your services. You can use this space to go into a little more detail about your company. Talk about your team and what services you provide. Tell your visitors the story of how you came up with the idea for your business and what makes you different from your competitors. INSERT YOUR TOPIC NAME
- 73. STEP 01 STEP 02 STEP 03 If you have a pic, you can put it here Process Chart INSERT YOUR TOPIC NAME
- 74. STEP 01 STEP 02 STEP 03 If you have a pic, you can put it here Process Chart INSERT YOUR TOPIC NAME
- 75. Title 2016 2014 2015 2013 2012 2011 2010 2009 2008 Title Title If you have more text here is where you can add it Timeline INSERT YOUR TOPIC NAME
- 76. 2016 2013 2011 Title Title If you have more text here is where you can add it Title Short Period Timeline INSERT YOUR TOPIC NAME
- 77. Demo Time!
- 78. Code Snippet Title Code snippet subtitle You can add some text. Lorem Ipsum yada yada yadda. — And — Bullets — Too! // Add awesome your code snippet below! // You can use Github Gists or go to this code highlighter. // From the Style picker, select monokai and then hit ‘Highlight’. // Copy and paste your highlighted code here. // In text formatting, select a transparent highlight (as the font’s background). function wrapValue(value) { return { getValue: function () { return value; }, setValue: function (newValue) { value = newValue; } }; } var x = wrapValue(5); console.log(x.getValue()); // output 5 x.setValue(7); console.log(x.getValue()); // output 7
- 79. This is what I want you to take from this talk: — Take away 01 — Take away 02 — Take away 03 — Take away 04 — Take away 05
- 80. This is what I want you to take from this talk: — Take away 01 — Take away 02 — Take away 03 — Take away 04 — Take away 05
- 81. This is what I want you to take from this talk: — Take away 01 — Take away 02 — Take away 03 — Take away 04 — Take away 05
- 82. This is what I want you to take from this talk: — Take away 01 — Take away 02 — Take away 03 — Take away 04 — Take away 05
- 83. Thank You [email protected] twitter@koltal linkedin/talkol github.com/talkol
- 84. Q&A [email protected] twitter@koltal linkedin/talkol github.com/talkol
- 85. Assets Musa GIFs and PNGs Logos of Mussa's Wix 7, Wix TLV and Wix Haifa Icons (at the end, for people to use): server, keyboard, laptop, database, code, user, Request, browser.
- 86. Assets Database Security Application Developer Developer Browser Code Network Network Network Copy Tools Library Library Library Dependency Dependency Client Server Pros Pros Cons Cons Error Error Error Monitor Bug Bug Search Search User Team API Design Design Log in Keyboard Request Open Source Web Message Domain
- 87. Assets Database Security Application Developer Developer Browser Code Network Network Network Copy Tools Library Library Library Dependency Dependency Client Server Pros Pros Cons Cons Error Error Error Monitor Bug Bug Search Search User Team API Design Design Log in Keyboar Request Open Source Web Message Domain
- 88. Assets Database Security Application Developer Developer Browser Code Network Network Network Copy Tools Library Library Library Dependency Dependency Client Server Pros Pros Cons Cons Error Error Error Monitor Bug Bug Search Search User Team API Design Design Log in Keyboar Request Open Source Web Message Domain