16
HPLN FRONTEND -Short overview- Nicu Dine SW Engineer HPLN

Mean machine

Embed Size (px)

Citation preview

Page 1: Mean machine

HPLN FRONTEND-Short overview-

Nicu DineSW Engineer HPLN

Page 2: Mean machine

LEAN MEAN MACHINE

Page 3: Mean machine

Build using Yeoman’s Angular Fullstack Generator

https://github.com/angular-fullstack/generator-angular-fullstack

Page 4: Mean machine

Why Yeoman ?• Fast and easy installation and initial configuration• Creates both client and server code in an organized manner• Easy creation of new endpoints • Great decoupling between client and server• Easy Grunt configuration

Page 5: Mean machine

Grunt• Automate• Build project• Minify• Run lint• Tests

Page 6: Mean machine

Why have a nodejs layer ?• Security

• Sanitization• CSRF• Token handling

• Powerful middleware• Error handling• Logging• Inline variables

• Configuration• Fast Saas compilation

• https://github.com/sass/node-sass

Page 7: Mean machine

Server-Configuration• For each environment keep custom configuration• Development

• Place to hammer the code • Staging

• Sandbox• Available for specific clients to test

• Production• Holy

Page 8: Mean machine

Server-Security• Token based communication• CRSF token • Validate input• Validate output• Hide information

Page 9: Mean machine

Server Routing• Routes• Every main section in the UI has corresponding endpoints in backend• Route Configuration• Page Generation

Page 10: Mean machine

Server-Errors • Error handling• Custom errors• Custom error object HPLNError

• Own mapping• Always send good response• Error doesn’t appear on the client’s console

Page 11: Mean machine

Client&&Server Logs• Custom logging technique• Level is set according to variable• Enabled/disabled using backend configuration

• Node: Winston• UI: HPLN Log

Page 12: Mean machine

Client• One index rendered as a template with inline variables (EJS)• Bind routes and errors from backend• intercept changes in states

• Grid based UI using the HPE design language and Alpha Bootstrap elements

Page 13: Mean machine

Client• ui-router• States are bound to urls• Easy to find

• Dirty blocker form• Widgets• Reusable components

Page 14: Mean machine

Client• Notification service• “someone” subscribes to an event that takes place in another component• Based on “ajax-angular-indicator” library:

https://github.com/flexpert/angular-ajax-indicator

Page 15: Mean machine

HPLN Showcase• Everything cool we developed is there• Fonts• Icon Fonts• Directives• Animations

• Open it to the world • 1st to other HPE teams• 2nd GitHub

Page 16: Mean machine

Quality• JSHint • Client side• Server side• tests

• SCSSLint• Bootlint• Unit tests• Mocha• nook

• E2E