Taking Development Tools To The Next Level

Robert Haritonov, @operatino, Head of Front End Development at OK.ru

Front-end Ops Conf, San Francisco, 2014. Video.

Fork me on GitHub

Taking Development Tools
To The Next Level

Robert Haritonov, @operatino
Head of Front End Development at
одноклассники

Integrated
Management
Environment

What? What?

1.Style
Guides

For web

Adapting Style Guides For Web

= Living Style Guides

© Nicole Sullivan: Creating Living Style Guides

spec page
spec page
spec page
spec page

A Good Style Guide Leads To

More about Style Guides

x2 with IME

IME is a Style Guide on Steroids

To get Style Guides work more efficiently,
it must become a Development Tool.

For Front-end modules
Management &
Maintenance

We can create own IME
on top of our Living Style Gudes.

Front-end IME Features

  1. Living Style Guide essentials
  2. Specialized tools for designers
  3. Collaboration tools
  4. Result testing
  5. GUI for console tools

Essentials

Living Style Guide essentials demo

To watch demo video, please open slides in browser that supports .mp4 or .webm playback.

The "Living" Part is about
Development
Directly in the
Style Guide

BEM + Living Style Guide

BEM
BEM files
spec page

Source

sourcejs.com

Templating engines + Source

Templating engines Source Plugins

2.IME For
Designers

Superman Superman

Interactive colors Style Guide demo

To watch demo video, please open slides in browser that supports .mp4 or .webm playback.
Interactive Graphics Style Guide
Interactive Graphics Style Guide
Thank you Thank you

3.Collaboration
Tools

For In-place Discussions

Integrating our IME with

Comments plugin demo

To watch demo video, please open slides in browser that supports .mp4 or .webm playback.

4.Result
Testing

Yesterdays Development Process

IDE,
console tools
index.html
Deployment

Update of Development Process

IDE,
console tools
IME
Deployment

Update of Development Process

IDE,
console tools
Source
Deployment

All Elements on One Page

Style Guide Driven Development

spec page
spec page
spec page

Auto-testing

5.Console Tools
GUI

Update of Development Process

IDE,
console tools
IME
Deployment

GUI for Console Tools

console tools gui
console tools gui

Lego Prototyping

With
Source API

Lego Prototyping From Real Style Guides Demo

To watch demo video, please open slides in browser that supports .mp4 or .webm playback.

Lego Prototyping From Real Style Guides Demo

To watch demo video, please open slides in browser that supports .mp4 or .webm playback.

Source

sourcejs.com

Taking Development Tools
To The Next Level

Robert Haritonov, @operatino, OK.ru

Slides - rhr.me/pres/ime