front end development transformation at scale, damon deaner

Front End Development Transformation

at Scale

Who Am I?

Head of Front End Development Programs

@damondeaner @ibmdesign #IBMDesign

DAMON DEANER

IBM country locations150 OVER

400KOVER

IBM employees worldwide

125,000

250,000

375,000

500,000

Source: Fortune 500 2015 http://fortune.com/fortune500/

Good Design is Good Business. -

Thomas J. Watson, Jr. CEO, IBM

“

By User:Doron (Own work) CC-BY-SA-3.0 via Wikimedia Commons

There’s one key to our future growth: the client experience. Ginni Rometty CEO, IBM

“

PeopleUX DesignVisual DesignDesign ResearchFront End Development

Bringing skills and expertise together

People

By Jakub Hałun (Own work) CC BY-SA 3.0 via Wikimedia Commons

Design Engineering

By RyanJWilmot (Own work) [CC BY-SA 4.0], via Wikimedia Commons

FED@IBM :: ©2015 IBM Corporation

FED@IBM Establish a world class competency for Front End Development, compatible with a range of product team models, that maximizes

our ability to deliver modern and compelling user experiences

22

Practice

People

Enablement

PEOPLE Building FED capacity and leadership

Sr.Jr.

Web Front-EndJavaScript UI

UXDesigner

Developer

EngineerArchitect

NinjaUnicorn

Full-Stack

Sr.Jr.

Web Front-EndJavaScript UI

UXDesigner

Developer

EngineerArchitect

NinjaUnicorn

Full-Stack

Sr.Jr.

Web Front-EndJavaScript UI

UXDesigner

Developer

EngineerArchitect

NinjaUnicorn

Full-Stack

UX design, visual design, user research

WebMarkup

(HTML & CSS)

JavaScriptFrameworks

(jQuery, Dojo, etc.)

VanillaJavaScript

(API calls)

Non-browserJavaScript (Node.js, etc.)

Other back end

engineering

Native Mobile (iOS, Android, Windows, etc.)

UX design, visual design, user research

WebMarkup

(HTML & CSS)

JavaScriptFrameworks

(jQuery, Dojo, etc.)

VanillaJavaScript

(API calls)

Non-browserJavaScript (Node.js, etc.)

Other back end

engineering

Native Mobile (iOS, Android, Windows, etc.)

Unified FED@IBM community

Includes all IBM FEDs regardless of title, location, or organization

Spectrum of Front End Development skills define Front End Development practitioners (FEDs)

PRACTICES Product team workflow, tooling, & collaboration

UX design, visual design, user research

WebMarkup

(HTML & CSS)

JavaScriptFrameworks

(jQuery, Dojo, etc.)

VanillaJavaScript

(API calls)

Non-browserJavaScript (Node.js, etc.)

Other back end

engineering

Native Mobile (iOS, Android, Windows, etc.)

Person 1

Person 2

Person 3

Person 4

Project X

UX design, visual design, user research

WebMarkup

(HTML & CSS)

JavaScriptFrameworks

(jQuery, Dojo, etc.)

VanillaJavaScript

(API calls)

Non-browserJavaScript (Node.js, etc.)

Other back end

engineering

Native Mobile (iOS, Android, Windows, etc.)

Project X

Two kinds of work Prototyping + Delivery

UX design, visual design, user research

WebMarkup

(HTML & CSS)

JavaScriptFrameworks

(jQuery, Dojo, etc.)

VanillaJavaScript

(API calls)

Non-browserJavaScript (Node.js, etc.)

Other back end

engineering

Native Mobile (iOS, Android, Windows, etc.)

Project X

UX design, visual design, user research

WebMarkup

(HTML & CSS)

JavaScriptFrameworks

(jQuery, Dojo, etc.)

VanillaJavaScript

(API calls)

Non-browserJavaScript (Node.js, etc.)

Other back end

engineering

Native Mobile (iOS, Android, Windows, etc.)

Project X

Design team

Engineering team

UX design, visual design, user research

WebMarkup

(HTML & CSS)

JavaScriptFrameworks

(jQuery, Dojo, etc.)

VanillaJavaScript

(API calls)

Non-browserJavaScript (Node.js, etc.)

Other back end

engineering

Native Mobile (iOS, Android, Windows, etc.)

Unified FED teamwork, leadership, and community

Shared ownership of prototyping and delivery

Project X

Standards and asset

libraries

Pull requests

UX design, visual design, user research

WebMarkup

(HTML & CSS)

JavaScriptFrameworks

(jQuery, Dojo, etc.)

VanillaJavaScript

(API calls)

Non-browserJavaScript (Node.js, etc.)

Other back end

engineering

Native Mobile (iOS, Android, Windows, etc.)

Design team

Engineering team

Shared everything: • Skills baseline • Communications • Prototyping • Delivery standards • Source code • Assets • Backlog • Tools • Metrics • Etc.

Project X

S O C I A L C O D I N G

ENABLEMENT Baseline and continuing education programs

39

Pattern & Component Libraries

IBM Design Thinking

Cloud 101

UX 101

IBM Design Language

Semantic HTML

Accessibility

HTTP

Rest APIs

Mastering Vanilla JavaScript

Test Driven Development

Performance

Microservices & Architecture Node.js

Web Analytics & Instrumentation

Team Process Pair Programming

GIT for Teams

Delivery Pipeline

File System Organization

Naming Conventions & Style Management

CSS & Preprocessors

Security

IP & Open Source

Node-based Task Runners

Globalization & Internationalization

Interactions, Motion & Animation

User Testing

Responsive Design

Pair Design

Design FEDs Industry Hire FEDsEarly Career FEDs Engineering FEDs

40

Modern, enterprise-level FED tools,

techniques, technologies, and practices

Shared baseline of skills and practices

Design FEDs Industry Hire FEDsEarly Career FEDs Engineering FEDs

41

FED@IBM Hackademy

FEDucation

Bringing modern day FED education modules delivered by subject matter experts. Twice monthly meetups broadcast and recorded for the worldwide FED community.

Coding 101

Giving designers and FED practitioners a chance to experience pair programming as well as teaching basic coding to designers who want to learn more.

FED Dates

Giving FED practitioners an opportunity to present on and learn about modern Front End Development tools, techniques, and best practices.

Continuing Education

By Nepenthes (Own work) [CC BY-SA 3.0], via Wikimedia Commons

Resourceful &

Driven

Unique Skills &

Needs

Collaboration &

Social Coding

1 2 3

Jefferson Lam

Kevin Suttle

Sam Richard

Una Kravets

Jessica Tremblay

Mina Markham

Chris Moody

Ross Fenrick

Bill Higgins

Lisa Dyer

Konrad Lagarde

Maria Elavumkal

Amber Atkins

Damon Deaner

Charlie Hill

Phil Gilbert

Keep in touch! frontend@us.ibm.com