front end development transformation at scale, damon deaner
TRANSCRIPT
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! [email protected]