This document outlines IBM's efforts to transform front end development at scale. It discusses establishing a world-class front end development competency to deliver modern user experiences. This includes building FED capacity and leadership, defining common practices around workflows and collaboration, and providing enabling education programs to establish a shared baseline of skills. The goal is to maximize the ability to deliver compelling experiences through a unified front end development community and practices.

1. Front End Development Transformation
at Scale

2. Who Am I?
Head of Front End Development Programs
@damondeaner @ibmdesign #IBMDesign
DAMON DEANER

3. IBM country locations150
OVER
400K
OVER
IBM employees worldwide

5. 125,000
250,000
375,000
500,000
Source: Fortune 500 2015 http://fortune.com/fortune500/

7. Good Design is
Good Business.
-
Thomas J. Watson, Jr.
CEO, IBM
“

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

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

13. People
UX Design
Visual Design
Design Research
Front End Development
Bringing skills and expertise
together
People

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

20. Design Engineering

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

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

23. Practice
People
Enablement

24. PEOPLE
Building FED capacity and
leadership

25. Sr.
Jr.
Web Front-End
JavaScript UI
UXDesigner
Developer
Engineer
Architect
Ninja
Unicorn
Full-Stack

26. Sr.
Jr.
Web Front-End
JavaScript UI
UXDesigner
Developer
Engineer
Architect
Ninja
Unicorn
Full-Stack

27. Sr.
Jr.
Web Front-End
JavaScript UI
UXDesigner
Developer
Engineer
Architect
Ninja
Unicorn
Full-Stack
UX design,
visual design,
user research
Web
Markup
(HTML & CSS)
JavaScript
Frameworks
(jQuery, Dojo, etc.)
Vanilla
JavaScript
(API calls)
Non-browser
JavaScript
(Node.js, etc.)
Other
back end
engineering
Native Mobile
(iOS, Android, Windows, etc.)

28. UX design,
visual design,
user research
Web
Markup
(HTML & CSS)
JavaScript
Frameworks
(jQuery, Dojo, etc.)
Vanilla
JavaScript
(API calls)
Non-browser
JavaScript
(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)

30. PRACTICES
Product team workflow,
tooling, & collaboration

31. UX design,
visual design,
user research
Web
Markup
(HTML & CSS)
JavaScript
Frameworks
(jQuery, Dojo, etc.)
Vanilla
JavaScript
(API calls)
Non-browser
JavaScript
(Node.js, etc.)
Other
back end
engineering
Native Mobile
(iOS, Android, Windows, etc.)
Person 1
Person 2
Person 3
Person 4
Project X

32. UX design,
visual design,
user research
Web
Markup
(HTML & CSS)
JavaScript
Frameworks
(jQuery, Dojo, etc.)
Vanilla
JavaScript
(API calls)
Non-browser
JavaScript
(Node.js, etc.)
Other
back end
engineering
Native Mobile
(iOS, Android, Windows, etc.)
Project X

33. Two kinds of work
Prototyping + Delivery
UX design,
visual design,
user research
Web
Markup
(HTML & CSS)
JavaScript
Frameworks
(jQuery, Dojo, etc.)
Vanilla
JavaScript
(API calls)
Non-browser
JavaScript
(Node.js, etc.)
Other
back end
engineering
Native Mobile
(iOS, Android, Windows, etc.)
Project X

34. UX design,
visual design,
user research
Web
Markup
(HTML & CSS)
JavaScript
Frameworks
(jQuery, Dojo, etc.)
Vanilla
JavaScript
(API calls)
Non-browser
JavaScript
(Node.js, etc.)
Other
back end
engineering
Native Mobile
(iOS, Android, Windows, etc.)
Project X

35. Design team
Engineering team
UX design,
visual design,
user research
Web
Markup
(HTML & CSS)
JavaScript
Frameworks
(jQuery, Dojo, etc.)
Vanilla
JavaScript
(API calls)
Non-browser
JavaScript
(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

36. Standards
and asset
libraries
Pull
requests
UX design,
visual design,
user research
Web
Markup
(HTML & CSS)
JavaScript
Frameworks
(jQuery, Dojo, etc.)
Vanilla
JavaScript
(API calls)
Non-browser
JavaScript
(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

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

38. ENABLEMENT
Baseline and continuing
education programs

39. 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. 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. 41
FED@IBM Hackademy

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

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

44. Resourceful
&
Driven
Unique Skills
&
Needs
Collaboration
&
Social Coding

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

47. Keep in touch!
frontend@us.ibm.com