Download - Source - Front-end documentation engine

Transcript
Page 1: Source - Front-end documentation engine

SourceFront-end documentation engine

Robert Haritonov

Page 2: Source - Front-end documentation engine

Pain

Page 3: Source - Front-end documentation engine

Pain

Page 4: Source - Front-end documentation engine

Pain

Page 5: Source - Front-end documentation engine

Developers pain

• Duplicated code

• Infinite redesign

• Front-end testing and documentation

05

Page 6: Source - Front-end documentation engine

Less chaos

Page 7: Source - Front-end documentation engine

More fun

Page 8: Source - Front-end documentation engine

Collaboration problems

• Supporting common codebase

• Communication with designers, testers back-end devs

• External teams - Freelancers

08

Page 9: Source - Front-end documentation engine

Solution?

Page 10: Source - Front-end documentation engine
Page 11: Source - Front-end documentation engine

Source

Page 12: Source - Front-end documentation engine

Source solves problems with

• Documentation

• Frontend development

• Interface testing

• Collaboration - one language for all team

12

Page 13: Source - Front-end documentation engine

Open Source!

Page 14: Source - Front-end documentation engine

Source!sourcejs.com

Page 15: Source - Front-end documentation engine

Rethinkingdocumentation

Page 16: Source - Front-end documentation engine

Frontend development process

Yesterday

IDE ➧ Static.html ➧ Documentation? ➧ Deployment

16

Page 17: Source - Front-end documentation engine

Frontend development process

Tomorrow

IDE ➧ Source ➧ Deployment

17

Page 18: Source - Front-end documentation engine

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
Page 20: Source - Front-end documentation engine
Page 21: Source - Front-end documentation engine
Page 22: Source - Front-end documentation engine
Page 23: Source - Front-end documentation engine

Web app fordocumentation

Page 24: Source - Front-end documentation engine
Page 25: Source - Front-end documentation engine

Core modulesand plugins

Page 26: Source - Front-end documentation engine

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
Page 28: Source - Front-end documentation engine
Page 29: Source - Front-end documentation engine
Page 30: Source - Front-end documentation engine
Page 31: Source - Front-end documentation engine

Source!sourcejs.com

Page 32: Source - Front-end documentation engine

Technologies

• JavaScript

• RequireJS, Jasmine

• NodeJS, Grunt, PhantomJS, Volo

• and more to come

32

Page 33: Source - Front-end documentation engine

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

Thank you!

Page 35: Source - Front-end documentation engine

Robert HaritonovSourcejs.com @operatino_en [email protected]

Presentation slides rhr.me/pres/source-min

Page 36: Source - Front-end documentation engine

Source!sourcejs.com