Skip to content

Instantly share code, notes, and snippets.

@RyanParsley
Last active July 14, 2016 13:15
Show Gist options
  • Select an option

  • Save RyanParsley/80058a218ded22ba9318b20cb7ec0b7f to your computer and use it in GitHub Desktop.

Select an option

Save RyanParsley/80058a218ded22ba9318b20cb7ec0b7f to your computer and use it in GitHub Desktop.
I scaffolded out an internal project with some of my favorite toys.

name: Project Board class: middle, center

Project Board

Frontend toolbox

June 30, 2016

???

In Cincinnati, we've been working on a project in the margins of our timesheets. It's early days for the project, but I thought it'd be nice to discuss some lessons learned while they are still fresh in my mind. I've mostly been focused on workflow and plumbing of this Angular 2 app that will get data from a headless Drupal instance.


Technology Used

  • Angular2 (typescript)
  • Grunt (ts, tslint, jshint, imagemin, cachebusting)
  • Sass
  • Pug
  • KSS
  • Protractor (E2E/integration tests)
  • Karma (Unit tests)
  • SVGStore
  • JSON Server
  • Connect

???

class: middle, center

JSON Server

???

Just add water (read: static json file) for your own restful database

I wanted to start scaffolding out a functional frontend before the backend was set up. This enabled me to mock up a chicken so I could develop an egg.


class: middle, center

Connect

???

A standalone node server that is what powers express.


Connect

  • Simplify Selinium setup for continuous integration
  • Eliminate need of apache configuration on developer machine.

???

I originally introduced connect so I could spin up a server in CI to run Protractor against. During the struggle to configure Apache one Kevin's computer, it occured to me that he doesn't need apache any more than Team City does. He types npm start: Connect and json server fire up on 2 ports for dev, they spin up clones under different ports for Protractor to periodically run and the browser launches to the reveal a livereloading dev site.


class: middle, center

TypeScript

???

I have the project configured to be built with typescript via a grunt wrapper around the standard tsc while keeping all the files where the Angular2 CLI expects them to be. This way I can have as sophisticated of a build/deploy process as I want without needing to roll my own brocholi extensions


TypeScript

typescript

???

I'm not seeing a lot of advantage to using Typescript, yet. It's cumbersome.


Resources

???

Summary, thus far: Angular 2 is not so scary. Typscript is not an easy sell. Optimizing for robots can provide benefits for humans. In a pinch, Kevin Peterson can write code.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment