LEGO world

Going beyond shared components

lego brick


LEGO BRicks

GUI COMPONENT LIBRARY


LEGO SEt

LEGO sets

lego city

let's do this with whole features

  • Example: Login
  • Every app has to have it
  • Why re-invent the wheel?
  • Build it once...use it many times

COMMON GUI FEATURES

Login
Error/Success Messaging
Navigation
User Management
Role-Based Access
Inactivity Timeout
Dashboard
Status Bar
User Preferences
Localization
...

COMMON DPAD FEATURES

Systems List
System Details
Backup Config
Replication Config
File-Level Recovery
Activity Monitoring
...

build them once!

Things I've built 3 times in 3 years at EMC
  1. login
  2. navigation
  3. system listing,
  4. monitoring
  5. ...
*monet (sencha, then flex), brm

the GUI technology is available


It was made to be used this way.
This is not a hack.

we are already doing this

VM-ware FLR (Glicksman's project)
  1. emc-ui ( gui components )
  2. emc.angular.utils ( angular utilities )
  3. emc.angular.login ( a whole feature )

*ask for a demo anytime

let's look at an example

Ye old login form

who needs login built in 2014?

  1. VM-ware FLR
  2. Hyper-V FLR
  3. Harmony V2
  4. ???

let's build one Cool login feature!


emc.angular.login
  • publish it
  • use it


how can we all use it?

With 3 lines of javascript code!

1. Use bower to install it
bower install http://ucas-gitlab.lss.emc.com/gui/emc.angular.login.git#0.0.6
2. Add a dependency in your application
"emc-angular-login",
2. Add a script tag to your html file
<script srce=".../emc.angular.login.js"></script>

how can i customize A feature?

  1. CSS
  2. Replace the HTML template with yours
  3. Components have config objects
  4. Use AngularJS Dependency Injection
  5. Use AngularJS Decorators
  6. Use AngularJS HTTP Interceptors
  7. Create a pull request and make it 
    configurable...other's might need it too. 

secret saucE


let's change how we work


MINE! MINE! MINE! 

  1. Managers jockey for projects
  2. Teams are siloed
  3. Talent is siloed
  4. Communication is project-based

it's all ours to share

  • Teams are more feature focused
  • Managers run their teams how THEY want to
  • Teams work semi-independently
  • Integration team assembles the product
  • Cross-pollination:
    • Communication
    • Skills
    • Projects
    • Features
    • Components

wait! we can do more!

This pattern is not limited to GUI components
running in browsers

LOGIN HAS A MIDDLE-END TOO

  1. Build a REST service for the GUI to login
  2. Interact with backend api for authentication
  3. Handle success, failure
  4. Package as an npm module
  5. emc-service-login
  6. Expose through git
  7. Consumable via npm


 npm install emc-service-login.git#0.0.6

LOGIN is a full feature

  • In the next new project emc-cool-product
  • Add npm dependency on npm module ( middle-ware )
    • emc-service-login
  • Add bower dependency on gui feature ( front-end )
    • emc-angular-login
  • Standard Login is DONE in the GUI, and middle-tier
  • OR, customize as you see fit.

secret sauce 2



nodejs?  are you crazy?

Walmart
Paypal
Netflix
eBay
Dow Jones
Linkedin
The New York Times
Microsoft
Yahoo
More...

but we use java!


our developers know java

  1. Smart people learn new stuff
  2. Learning is fundamental to a developer
  3. EMC needs better GUIs
  4. I personally helped train 7 people on AngularJS 
    1. Web-devs ( David, KT )
    2. Java-devs ( Kathy, Aaron, Duc )
    3. Flex-devs ( Spencer ) 

isn't it slow?

Improved performance
Non-blocking
Fast development speed

OTHER BENEFITS
One language
Testing
Mocking

...um...we don't have many concurrent users anyway.

It's time to re-tool

  • We build web GUIs
  • Let's use latest web technology
  • The tech is moving very fast
    • 10 million github repos
    • 55,000 node packages
  • We are getting left behind
  • Java as a web technology is 
    long in the tooth

track record

  1. JavaScript over Flex
  2. AngularJS over Sencha
  3. HTML5 over Native Mobile

how long will harmony live?

5 years, 10 years, 15 years?

Let's not use technology that is already 5-10 years old

Our technology stack is a huge recruiting tool

The future is NOW!
Made with Slides.com