Created: 2017-02-20 21:08
Updated: 2017-11-14 01:33

Angular ES6 Webpack app

npm used


Made with:

• ES6, Babel, Node, Webpack, AngularJS, UI-Router, ESLint, UglifyJS, Atom (ESLint, bootstrap boot-lint, css-lint), git, nginx, Photoshop.

• Style guides / guidelines: Airbnb, Pete Hunt

A custom app for Sam Ford, an illustrator and artist.

Design + Code: Amanda Falke, Portland Oregon


A "performance-first, mobile-first" responsive design, hosted on nginx.

I've written and delivered a performant AngularJS app for a visual artist, where both image quality and fast speeds (particularly on mobile) were a primary concern. For this reason, detail-oriented image compression techniques were used (UglifyJS, Google pagespeed, Photoshop), nginx was chosen for the server over Apache, and gzip techniques were also used.

Design: Performance

  • Minification: UglifyJS (and Webpack's Angular Inject plugin) used
  • FOUC: Extract Text Webpack Plugin used, but did not make discernible benchmarked performance difference
  • gzip: Used whenever possible on nginx VPS
  • Images (format): JPG chosen over PNG for smaller file sizes and photographic image quality; SVG and vectors not appropriate for design.
  • Images (size): Bootstrap breakpoints and responsive image classes used; Photoshop compression techniques used
  • Generated pages Using regexp, URL segment pattern matching, and JSON in SPA architecture rather than individual pages for each portfolio piece

Design notes

  • SPA with generated portfolio pages: Portfolio pages are generated from JSON using nested views with UI-Router and regular expression pattern matching via URL segments and $stateparams.

  • Custom next logic: The Carousel in this project is an Angular-UI Bootstrap Carousel and tpls template, so I used custom logic with pattern matching URLs of generated portfolio pages for the next/prev logic for portfolio pages.

Using existing technologies and best practices such as Angular-UI Bootstrap carousel, typography, bootstrap classes, the ngMagnify directive, UI-Router, and other open source software too,

I wrote custom JavaScript logic for models, nested views, routes.

My code:

webpack configuration file, app.js ES6 imports and logic, index.html bootstrap responsive classes, all of the JavaScript ui-router routes and logic, Angular directives and controllers in js/, and all of the html partials in pages/.

Everything else in this project is open source.


  1. Clone the repo
  2. $ nvm use will use Node 6.9.2
  3. $ npm install
  4. $ npm run installdevdeps // will install all dev dependencies
  5. $ npm run clean
  6. $ npm run build // Webpack compilation will verbosely warn re: UglifyJS
  7. $ npm run dev // runs Webpack dev server in --inline hot mode
  8. App will now run, albeit without (client-owned, copyrighted) images; populate JSON objects with appropriate images in model logic.

Responsive design (mobile first):


Bootstrap classes for mobile

Bootstrap classes for mobile

Bootstrap classes for mobile


Bootstrap classes for tablets


Bootstrap classes for desktops

Bootstrap classes for desktops

Bootstrap classes for desktops

Bootstrap classes for desktops

Noted bug: Chrome on Windows: opening up a new tab stops navigation with Angular-UI Bootstrap Carousel (something I didn't build! ha)

Cookies help us deliver our services. By using our services, you agree to our use of cookies Learn more