Upload
nicu-dine
View
173
Download
0
Embed Size (px)
Citation preview
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