i - front-end spectrum
TRANSCRIPT
<web/F>
Front-end Spectrum The right foot first
Agenda
• Categorization of Web Applications
• DevOps – History and Today
• Enterprise Web Applications & AngularJS
• AngularJS Application Architecture
• Front-end Spectrum
<web/F> <web/F>
Web Applications Categorization
<web/F> <web/F>
Websites
• Example – http://www.webf.zone
• Online presence for an organization or individual
• Content rich
• Static and Dynamic
• Served mostly from a single domain
• Maintenance is usually easy
• Web Design, Hosting, Domain management, FTP
<web/F> <web/F>
Consumer Web Applications
• Example – http://www.facebook.com
• Openly accessible
• Lot of Content + Lot of Interaction
• Heavy server-side data processing
• Admin Console for Monitoring and Control
• Developed and Managed by multiple teams
• Served by multiple servers/domains
• UX, Graphics Design, UI Development, Front-end Engineering
<web/F> <web/F>
Enterprise Web Applications
• Examples
• https://redmine.myorg.com
• https://account.atlassian.net/jira
• Restricted access – mostly over secure intranets
• Interaction heavy
• Heavy server-side data processing
• Admin Console for Monitoring and Control
• Developed by multiple teams
• Cloud App – Clustered/Load-balanced - SAAS
• UX, Graphics Design, UI Development, Front-end Engineering
<web/F> <web/F>
DevOps History and today
<web/F> <web/F>
Development Automation
• Source Editing
• Bundling
• Local Deployment
• Linting
• CSS Preprocessing
<web/F> <web/F>
Continuous Integration
• Beyond Build Scripts
• Developer enablement – work on
anything, still commit
• Commit everyday, multiple times
• Put a watch on code repo (master) for
any new commit to run quality check
by running unit and integration tests
• 1991 - Grady Booch
<web/F> <web/F>
Continuous Delivery
• Beyond CI
• User Acceptance Tests (Staging)
• Release (Production)
• Very Recent
• Late 1990s – Extreme
Programming – Kent Beck
• Yahoo, Google, Amazon, Facebook
<web/F> <web/F>
Continuous Delivery
<web/F> <web/F>
DevOps
Today
• Beyond CI & CD
• Agile/UCD/Design Thinking =>
Rapid Sprints, Continuous Delivery
• Repo <-> Review <-> Bug Tracker
• Pipeline – Maven/Jenkins/Travis
• Dev - Integration - Staging - Prod
• Development Automation
• Continuous Integration
• Communication & Collaboration
• Continuous Delivery
<web/F> <web/F>
<web/F> <web/F>
Enterprise Web Apps & AngularJS How well does that work?
<web/F> <web/F>
Enterprise Applications
Display, manipulation & storage of large amounts of often complex data
and
the support or automation of business processes with that data
- Martin Fowler
<web/F> <web/F>
Enterprise Web Application Challenges
• Heavy dependency on domain knowledge
• Integration with Legacy components
• Security
• Shotgun Surgery
• Documentation over productivity
• Organizational culture influence on
engineering workflow
• Bureaucracy Vs Agile / Slow decisions
• Too much Monitoring
• Restriction on tools
• Distributed & Remote teams
• Developer freedom
• Tools
• Practices
• Time-zone differences
<web/F> <web/F>
Good parts of AngularJS
• Encourages good practices - Dependency Injections
• Testability - Dependency Injections
• Facilitates Collaboration
• Strong ‘View’ infrastructure - Abstractions from DOM Manipulations
• Promotes maintainable structure
• ngResource for RESTful front-end
<web/F> <web/F>
So-called Challenges with AngularJS
• Lock-in
• Opinionated Architecture
• Accidental Complexity
• Testability
• Steep learning curve
<web/F> <web/F>
The Gap
AngularJS offers
• Solid UI Framework
• Two way data binding
• Templates
• Separation of concerns
• Dependency Injection
• Promotion for best practices
Front-end needs more
• CSS Components
• Data Models
• Async loading
• Linting, Code Formatting
• Unit Testing, E-2-E Testing
• Documentation
• Build Script/CI/CD/DevOps
<web/F> <web/F>
AngularJS Application Architecture AngularJS as your {{hammer}}
<web/F> <web/F>
How it starts
UX Team
UI Team
API Team
Views
Resources
<web/F> <web/F>
Views into logical organization
Interpreted
Views Modules
<web/F> <web/F>
Modules into Folder Structure
Translate to
Folder structure Modules
<web/F> <web/F>
Towards shotgun surgery syndrome
<web/F> <web/F>
Rich object model pattern
S
E
R
V
E
R
C
L
I
E
N
T
VIE
WS
CO
NTR
OLL
ERS
STORES FA
CTO
RIE
S (F
AC
AD
E)
Entities Services (Logic less)
<web/F> <web/F>
Something more beyond shotgun surgery
Angular has no say about
Rigidity
Fragility
Immobility
<web/F> <web/F>
Immobility on front-end
• Presentation logic changes
drastically as compared to
Domain logic.
• Thus immobility is just
something that every UI code
has to live with. 0
2
4
6
8
10
12
Change rate
Presentation vs. Domain
Domain Presentation
<web/F> <web/F>
Rigidity and Fragility
• But we as developers are responsible for introducing rigidity and
fragility into our system
• Worst part is we don’t even realize it
<web/F> <web/F>
Angular – toward better design
Copy
Read Keyboard
Write Printer
<web/F> <web/F>
Typical copy program
void Copy()
{
int c;
while ((c = ReadKeyboard()) != EOF)
WritePrinter(c);
}
<web/F> <web/F>
What happens when one of the low level module changes?
<web/F> <web/F>
Typical copy program
enum OutputDevice {printer, disk};
void Copy(outputDevice dev)
{
int c;
while ((c = ReadKeyboard()) != EOF)
if (dev == printer) WritePrinter(c);
else WriteDisk(c);
}
<web/F> <web/F>
Angular – toward better design
Copy
Reader (abstract)
Writer (abstract)
Read Keyboard
Read Keyboard
<web/F> <web/F>
Front-end Spectrum Building the Technology Stack
<web/F> <web/F>
Design Pillars
Mai
nta
inab
ility
Scal
e
Perf
orm
ance
<web/F> <web/F>
DevOps Pipeline
• Integration
• Code repo setup
• Code review tool
• Bug Tracker
• Define Environments – INT-STG-PRD
• Deployment Script
• gulpfile.js + .travis.yml + deploy.sh
<web/F> <web/F>
UI Framework
• AngularJS
• Use it as a hammer. But don’t forget to use the screw-driver, too.
• Namespace everything
• One Angular entity per file
• Avoid private functions – a guideline
• Group reusable smaller functions into Utility service
• Plan not to migrate to 2.0 but to leverage newer UI technologies
• E.g. Prefer ES5 properties instead of $scope.$watch
<web/F> <web/F>
Handy libraries
• Lodash
• Sass
• Mocha, Chai, Sinon
• Foundation for Apps
• Iconic
<web/F> <web/F>
Folder Structure
• Mapping a complete feature to one folder works best – A guideline
• Keep your build script in mind
• Have high respect for naming conventions
• Standard folders
<web/F> <web/F>
Linting, Code Formatting
• Have a coding style guide
• Configure editors to follow those rules
• ESLint is by far the best linter
• Should you lint your CSS?
• Gulp tasks
<web/F> <web/F>
Documentation
• ngdoc
• Simple declarative sentence, present tense, start with upper case
• Concise but comprehensive – what if argument is empty?
• Examples
<web/F> <web/F>
Unit Testing
<web/F> <web/F>
Build Script
Gulp
• New functionality only
• One task = One thing
• Don’t throw err inside a stream
Useful Extensions
• concat, cssimport, eslint, gzip,
ignore, minify-css, ngdocs, ng-
annotate, postcss, rename, sass,
sourcemap, svg-sprite, uglify, util
<web/F> <web/F>
Git Workflow Overview
• Never work on master
• One feature/bug = a local branch
• git fetch – git merge origin master – (on branch) git rebase master
• Use ‘drafts’ for incomplete push (Gerrit)
<web/F> <web/F>
Thank you Kumar Bhot
@UsableBytes | https://in.linkedin.com/in/kumarbhot
http://www.kumarbhot.com