source - front-end documentation engine

36
Source Front-end documentation engine Robert Haritonov

Upload: robert-haritonov

Post on 05-Dec-2014

1.181 views

Category:

Technology


1 download

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 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