Source - Front-end documentation engine
-
Upload
robert-haritonov -
Category
Technology
-
view
1.181 -
download
1
description
Transcript of Source - Front-end documentation engine
![Page 2: Source - Front-end documentation engine](https://reader033.fdocuments.net/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/2.jpg)
Pain
![Page 3: Source - Front-end documentation engine](https://reader033.fdocuments.net/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/3.jpg)
Pain
![Page 4: Source - Front-end documentation engine](https://reader033.fdocuments.net/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/4.jpg)
Pain
![Page 5: Source - Front-end documentation engine](https://reader033.fdocuments.net/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/5.jpg)
Developers pain
• Duplicated code
• Infinite redesign
• Front-end testing and documentation
05
![Page 6: Source - Front-end documentation engine](https://reader033.fdocuments.net/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/6.jpg)
Less chaos
![Page 7: Source - Front-end documentation engine](https://reader033.fdocuments.net/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/7.jpg)
More fun
![Page 8: Source - Front-end documentation engine](https://reader033.fdocuments.net/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/8.jpg)
Collaboration problems
• Supporting common codebase
• Communication with designers, testers back-end devs
• External teams - Freelancers
08
![Page 9: Source - Front-end documentation engine](https://reader033.fdocuments.net/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/9.jpg)
Solution?
![Page 10: Source - Front-end documentation engine](https://reader033.fdocuments.net/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/10.jpg)
![Page 11: Source - Front-end documentation engine](https://reader033.fdocuments.net/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/11.jpg)
Source
![Page 12: Source - Front-end documentation engine](https://reader033.fdocuments.net/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/12.jpg)
Source solves problems with
• Documentation
• Frontend development
• Interface testing
• Collaboration - one language for all team
12
![Page 13: Source - Front-end documentation engine](https://reader033.fdocuments.net/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/13.jpg)
Open Source!
![Page 15: Source - Front-end documentation engine](https://reader033.fdocuments.net/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/15.jpg)
Rethinkingdocumentation
![Page 16: Source - Front-end documentation engine](https://reader033.fdocuments.net/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/16.jpg)
Frontend development process
Yesterday
IDE ➧ Static.html ➧ Documentation? ➧ Deployment
16
![Page 17: Source - Front-end documentation engine](https://reader033.fdocuments.net/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/17.jpg)
Frontend development process
Tomorrow
IDE ➧ Source ➧ Deployment
17
![Page 18: Source - Front-end documentation engine](https://reader033.fdocuments.net/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/18.jpg)
Live demo time
• Documentation is created from enhanced static files
• Showing how documentations looks in real live
• Comparing documentation and real-life interfaces
Please check presentation video recording for more details
18
![Page 19: Source - Front-end documentation engine](https://reader033.fdocuments.net/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/19.jpg)
![Page 20: Source - Front-end documentation engine](https://reader033.fdocuments.net/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/20.jpg)
![Page 21: Source - Front-end documentation engine](https://reader033.fdocuments.net/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/21.jpg)
![Page 22: Source - Front-end documentation engine](https://reader033.fdocuments.net/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/22.jpg)
![Page 23: Source - Front-end documentation engine](https://reader033.fdocuments.net/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/23.jpg)
Web app fordocumentation
![Page 24: Source - Front-end documentation engine](https://reader033.fdocuments.net/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/24.jpg)
![Page 25: Source - Front-end documentation engine](https://reader033.fdocuments.net/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/25.jpg)
Core modulesand plugins
![Page 26: Source - Front-end documentation engine](https://reader033.fdocuments.net/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/26.jpg)
Live demo time
• Showing engine plugins, native and custom
• View source
• Navigation and search
• Comments
• Spec status
Please check presentation video recording for more details
26
![Page 27: Source - Front-end documentation engine](https://reader033.fdocuments.net/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/27.jpg)
![Page 28: Source - Front-end documentation engine](https://reader033.fdocuments.net/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/28.jpg)
![Page 29: Source - Front-end documentation engine](https://reader033.fdocuments.net/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/29.jpg)
![Page 30: Source - Front-end documentation engine](https://reader033.fdocuments.net/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/30.jpg)
![Page 32: Source - Front-end documentation engine](https://reader033.fdocuments.net/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/32.jpg)
Technologies
• JavaScript
• RequireJS, Jasmine
• NodeJS, Grunt, PhantomJS, Volo
• and more to come
32
![Page 33: Source - Front-end documentation engine](https://reader033.fdocuments.net/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/33.jpg)
Future
• Auto-testing with PhantomJS
• Auto documentation generation
• Interface for fast experiments with CSS
• Interface for building prototypes from existing blocks
33
![Page 34: Source - Front-end documentation engine](https://reader033.fdocuments.net/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/34.jpg)
Thank you!
![Page 35: Source - Front-end documentation engine](https://reader033.fdocuments.net/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/35.jpg)
Robert HaritonovSourcejs.com @operatino_en [email protected]
Presentation slides rhr.me/pres/source-min