Spotlight Front-End
Web Dev
  • 2014-11-29 00:00:00 2014-11-29 00:00:00 America/Toronto Spotlight Front-End Toronto FITC
  • Toronto


Slides Article


Is your head spinning from the firehose of front-end tools, work flows, task runners, libraries, frameworks, MV*, and opinions? Not sure where or how to start? Need a broader introduction to how a JS application is built? Let’s take a step back and examine the building blocks of a modern front-end JS application, free from dogma. In this talk I’ll be speaking abstractly about the components a front-end engineer should consider when architecting a front-end JS application.

Rough outline.

* Select a developers project management tool for code projects
* Select a bug tracking system
* Select version control system and host
* devise a branching/tagging strategy
* Define devices, platforms, browser engines where application will run. If the app will run offline. If the application will need Internationalization/localization.
* Verify data API, it’s documentation, how to request updates, and plan cross domain strategy if needed
* Possibly select local server / staging server / production server stack (or very least how to run/serve your code, everywhere it will live e.g. a mobile app)
* Select package managers
* Dependency monitoring services
* Determine coding style/conventions/quality rules and enforce it
* html, css, and js linting/hinting
* editor/IDE configurations
* hooks
* Select build tool / task runner
* Define & select application structure & tools
* Dependency Management
* MV* (router, views, models, layout)
* CSS, HTML, JS frameworks/libraries
* Determine deployment strategy (e.g. CI, app stores etc..)
* Select a testing automation service to run tests across your supported devices, platforms, and browser engines
* Select unit testing solution(s)
* Test Runner
* Code Coverage
* TDD/BDD/ or just write unit tests
* hooks
* Select code complexity reporting/analysis solution(s)
* Select integration testing solution(s)
* Select functional testing solution(s)
* Select error monitoring solution(s)
* Select user monitoring solution(s)
* Select site monitoring / performance monitoring solution(s)
* Select site analytics solution(s)
* Determine SEO strategy
* Determine security model (https, multifactor authentication etc…)
* Select a CDN
* Write documentation explaining everything you decided, why you decided it, how it functions, and how it all fits together


Educate front-end engineers about the common components used to architect modern front-end applications.

Target Audience

Front-end developers and those back-end developers who are making the transition to front-end application development.

Assumed Audience Knowledge

Front-end skills and application development experience.

Five things audience members will learn

  1. The definition of a front-end JavaScript application
  2. The components used to architect a front-end JavaScript application
  3. A broad understanding of each component
  4. A real world example of each component
  5. Insights into architecting the components together