Basic Front-end Demo material

[mistergone]

This is a PR that integrates all the stuff I've been working on with regards to the front-end.

Additions

• package.json to allow for npm install
• Capital Framework (with bower)
• Gulp build (for Capital Framework as well as our JavaScript)
• ./src/disclosures/ directory for our "disclosures" source files
  • ./src/disclosures/js for JavaScript, including ./src/disclosures/js/lib for custom lib files
  • ./src/disclosures/css for CSS/LESS
• ./src/disclosures/css/disclosures.less for custom "disclosures" CSS/LESS
• ./src/disclosures/js/index.js, the main JS file.
  • ./src/disclosures/js/financial-data.js, which contains the code for our financial data model
  • ./src/disclosures/js/handle-string-input.js, a lib file for turning strings into numbers
  • ./src/disclosures/js/school-view.js, which contains basic code for our school & financial data view (input fields)
• Addition of several packages beyond Capital Framework, including:
  • browserify (including vinyl-buffer and vinyl-source-stream, for turning RequireJS-style packages into browser-friendly code
  • format-usd, for formatting numbers as currency strings
  • student-debt-calc, the amazing package written by super-geniuses which does the calculation for student debt values

Review/Testing

Please check this out @ascott1 and @higs4281 and @marteki and @niqjohnson!

Once you pull in the repo, you can do the following to review the front-end integration:

1. In the root directory of college-costs, run npm install
2. Then run bower install
3. Then run gulp
4. Then open just-a-demo.html in the root directory in your browser!

If you're keen to mess with things, gulp watch works!

There's no tests written for the front-end at this point (aside from independent tests in format-usd and student-debt-calc).

To Do

• Discuss with @higs4281 and @ascott1 how we want to do version control for this repo so we can maintain a sweet CHANGELOG.md in this unified repo.

Thanks

Thanks to @ascott1 for all his help!

[niqjohnson]

Mostly 👍 for me. The only hitch I ran into was having to run gulp twice to get the JavaScript working on the demo page the first time. After that, it's working great.

[marteki]

Got a weird error originally when running gulp. Looked at it this morning with Chuck, and we found the wonky reference! And now it works! 😄 Yay for pair debugging!

I also had the issue with the "Add random data values" button on the demo page not working until gulp was run twice. Chuck is also on that, and is pretty sure he knows where to fix it.

Assuming the double gulping gets fixed, I give this a 💃 for go-ahead. (We can address the whole "Bower is ceasing development as a project and isn't going to be used by Capital Framework anyway" thing later.)

[mistergone]

The double-gulping might be a result of the browserify gulp task not running before scripts gulp task or something like that. I'm going to try and debug that.

[niqjohnson]

Just noticed this: I pulled in the new directory structure from @higs4281, and it looks like there's now both a paying_for_college and a paying-for-college directory at the top level after gulp is run. Not sure if that's intentional or not.

[higs4281]

@mistergone @niqjohnson

not intended, and a side effect of my layout reboot.
the new directory should have underscores to join the UnityBox/cfgov party.

also, the target static directory is one level higher, so gulp should deliver to this directory:

college-costs/paying_for_college/static

[higs4281]

maybe gulp had to run twice because the first time paying-for-college dir didn't exist?

[higs4281]

👍 good to see the pipeline flowing!
sorry for the reboot. at a minimum gulp/config.js and the demo page will have to be adjusted.

[mistergone]

Update: It seems gulp (which runs the default, gulp build) does not know/see/love the file that browserify generates, so that file doesn't get bundled by the scripts task. I tried a few fixes, but no luck. I am going to call in everyone's hero, @ascott1, for help on this.

In the meantime, running gulp browserify before gulp should work. It's just that when gulp tries to do it all at build, it doesn't work. And I think gulp watch still works.

The new static directory is integrated into gulp's config now, so yay! 🚀 🐒 🐙

[higs4281]

@mistergone should we add a gulp browserify step to setup.sh?

[mistergone]

More Better Update: Adam gave me the insight needed to fix this - instead of trying to force browserify to work with the scripts task, I changed the scripts task to be based on browserify, and removed the browserify task. Now it works! Hooray!

I also updated frontendbuild.sh so you should be able to just type ./frontendbuild.sh in the command line and it'll do the npm install, bower install, and gulp for you.

I also updated just-a-demo.html to point to the right resources.

So please pull the latest and try to get it to work.

[Scotchester]

I also updated frontendbuild.sh so you should be able to just type ./frontendbuild.sh in the command line and it'll do the npm install, bower install, and gulp for you.

Is there a reason that this exists separately from setup.sh, which is present here and already does all those things?

[mistergone]

@Scotchester I would imagine I got my shell scripts mixed up... 🐙 💢

[mistergone]

setup.sh is the hotness 🔥, frontendbuild.sh has been removed ⛔.

[Scotchester]

Thanks :D

[niqjohnson]

Works perfectly for me. 👍

[mistergone]

@niqjohnson - Hooray! Thanks!

Update: Enabled uglify and sourcemaps in gulp scripts, and it seems to work! Plus, I removed a reference to the now-defunct browserify task in gulp watch, so gulp watch should work again.

[higs4281]

👍 love having everything in setup.sh
vote to merge!

[ascott1]

I haven't been able to run this locally due to a Django error, but looking through the code, this looks like a solid first step. 👍 to merge.