HPLN FRONTEND-Short overview-

Nicu DineSW Engineer HPLN

LEAN MEAN MACHINE

Build using Yeoman’s Angular Fullstack Generator

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

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

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

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

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

• Place to hammer the code • Staging

• Sandbox• Available for specific clients to test

• Production• Holy

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

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

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

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

• Node: Winston• UI: HPLN Log

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

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

• Dirty blocker form• Widgets• Reusable components

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

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

Quality• JSHint • Client side• Server side• tests

• SCSSLint• Bootlint• Unit tests• Mocha• nook

• E2E