source - front-end documentation engine
DESCRIPTION
Mini slides version of full presentation with live demo. Project page - http://sourcejs.com. HTML version of slides - http://rhr.me/pres/source-min. How to manage front-end development process within team of developers and designers effectively? Odnoklassniki.ru, world ‘Top 10’ social network, will share their experience in solving this question using open Source front-end documentation engine. Source was created to help front-end developers, designers, programmers and testers to become more productive and create best interfaces for the product. Their solution suits well for the big development teams, growing web projects, outsourced projects maintained by freelancers and web studios to optimize development time.TRANSCRIPT
![Page 2: Source - Front-end documentation engine](https://reader033.vdocuments.site/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/2.jpg)
Pain
![Page 3: Source - Front-end documentation engine](https://reader033.vdocuments.site/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/3.jpg)
Pain
![Page 4: Source - Front-end documentation engine](https://reader033.vdocuments.site/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/4.jpg)
Pain
![Page 5: Source - Front-end documentation engine](https://reader033.vdocuments.site/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.vdocuments.site/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/6.jpg)
Less chaos
![Page 7: Source - Front-end documentation engine](https://reader033.vdocuments.site/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/7.jpg)
More fun
![Page 8: Source - Front-end documentation engine](https://reader033.vdocuments.site/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.vdocuments.site/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/9.jpg)
Solution?
![Page 10: Source - Front-end documentation engine](https://reader033.vdocuments.site/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/10.jpg)
![Page 11: Source - Front-end documentation engine](https://reader033.vdocuments.site/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/11.jpg)
Source
![Page 12: Source - Front-end documentation engine](https://reader033.vdocuments.site/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.vdocuments.site/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/13.jpg)
Open Source!
![Page 15: Source - Front-end documentation engine](https://reader033.vdocuments.site/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/15.jpg)
Rethinkingdocumentation
![Page 16: Source - Front-end documentation engine](https://reader033.vdocuments.site/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.vdocuments.site/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.vdocuments.site/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.vdocuments.site/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/19.jpg)
![Page 20: Source - Front-end documentation engine](https://reader033.vdocuments.site/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/20.jpg)
![Page 21: Source - Front-end documentation engine](https://reader033.vdocuments.site/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/21.jpg)
![Page 22: Source - Front-end documentation engine](https://reader033.vdocuments.site/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/22.jpg)
![Page 23: Source - Front-end documentation engine](https://reader033.vdocuments.site/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/23.jpg)
Web app fordocumentation
![Page 24: Source - Front-end documentation engine](https://reader033.vdocuments.site/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/24.jpg)
![Page 25: Source - Front-end documentation engine](https://reader033.vdocuments.site/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/25.jpg)
Core modulesand plugins
![Page 26: Source - Front-end documentation engine](https://reader033.vdocuments.site/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.vdocuments.site/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/27.jpg)
![Page 28: Source - Front-end documentation engine](https://reader033.vdocuments.site/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/28.jpg)
![Page 29: Source - Front-end documentation engine](https://reader033.vdocuments.site/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/29.jpg)
![Page 30: Source - Front-end documentation engine](https://reader033.vdocuments.site/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/30.jpg)
![Page 32: Source - Front-end documentation engine](https://reader033.vdocuments.site/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.vdocuments.site/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.vdocuments.site/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/34.jpg)
Thank you!
![Page 35: Source - Front-end documentation engine](https://reader033.vdocuments.site/reader033/viewer/2022052504/548b9c40b47959f60c8b60bb/html5/thumbnails/35.jpg)
Robert HaritonovSourcejs.com @operatino_en [email protected]
Presentation slides rhr.me/pres/source-min