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
-
login
-
navigation
-
system listing,
-
monitoring
- ...
*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)
-
emc-ui ( gui components )
-
emc.angular.utils ( angular utilities )
- 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?
- VM-ware FLR
- Hyper-V FLR
- Harmony V2
- ???
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.62. 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?
- CSS
- Replace the HTML template with yours
- Components have config objects
- Use AngularJS Dependency Injection
- Use AngularJS Decorators
- Use AngularJS HTTP Interceptors
- 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!
-
Managers jockey for projects
-
Teams are siloed
-
Talent is siloed
-
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
-
Build a REST service for the GUI to login
- Interact with backend api for authentication
- Handle success, failure
- Package as an npm module
- emc-service-login
- Expose through git
- Consumable via npm
npm install emc-service-login.git#0.0.6LOGIN 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
but we use java!
our developers know java
- Smart people learn new stuff
- Learning is fundamental to a developer
- EMC needs better GUIs
- I personally helped train 7 people on AngularJS
- Web-devs ( David, KT )
- Java-devs ( Kathy, Aaron, Duc )
- 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
-
JavaScript over Flex
-
AngularJS over Sencha
-
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!
Lego World
By Dehru Cromer
