New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor Templates/Front End Assets #123

Merged
merged 38 commits into from Feb 19, 2016

Conversation

Projects
None yet
2 participants
@paulcpederson
Collaborator

paulcpederson commented Feb 19, 2016

This pr focuses mainly on performance and page weight, but it also cleans up folder structures and changes some tooling for the front end assets. Summary:

  1. Greatly simplify the templates folder by removing partials that weren't shared, and consolidating templates.
  2. Remove Grunt dependency for front end (now just uses npm)
  3. Remove RequireJS dependency
  4. Remove jQuery Dependency
  5. Remove Compass dependency
  6. Clean up and remove unused files in JavaScript folder
  7. Minify JavaScript by default
  8. Concatenate JavaScript into one bundle to reduce network requests
  9. Automatically prefix css properties when compiling sass
  10. Use node-sass instead of grunt-compass (this speeds up Sass compilation speeds like 10-fold)
  11. Allow use of newer EMACScript 6 JavaScript Syntax & modules (via babel/browserify)
  12. Added touch icons (#87)
  13. Added startup images (#89)
  14. Actual, working form submit error/success messages (#122)

The page loads pretty quickly now. It wasn't slow before, but I did a bit of benchmarking:

JS

Version Requests Transferred Latency
Old 8 245KB 436ms
New 1 132KB 23ms

CSS

Version Requests Transferred Latency
Old 2 43.2KB 189ms
New 1 28KB 23ms

XHR

Version Requests Transferred Latency
Old 1 97.6KB 2.03s
New 0 0 0

The XHR request to the roasters endpoint was delaying roasters appearing on the map by a full 2 seconds. I'm now just grabbing them from the DOM in the roasters list, which is working great.

Totals

Most of the weight/requests is from the map tiles for the total, so the gains proportionally are less, but still not bad:

Version Requests Transferred Finish DOMContentLoaded Load
Old 49 1MB 5.78s 525ms 699ms
New 40 832KB 3.42 222ms 644ms

The DOMContent Loaded improvement is mostly just the different in network latency between local and pdxroasters.com which I'm using for the benchmark, but all the other gains are real.

Sorry this pr is so huge, I originally wanted to just remove the API request to the roasters on the homepage and it was really hard because everything was awful. Sort of went like this:

t0xhtgj

/cc @twaddington @isaacviel

paulcpederson added some commits Feb 2, 2016

@twaddington

This comment has been minimized.

Show comment
Hide comment
@twaddington

twaddington Feb 19, 2016

Owner

Fuck it, let's merge it in and see if it works. Can always roll back if need be.

Owner

twaddington commented Feb 19, 2016

Fuck it, let's merge it in and see if it works. Can always roll back if need be.

twaddington added a commit that referenced this pull request Feb 19, 2016

Merge pull request #123 from paulcpederson/new-js
Refactor Templates/Front End Assets

@twaddington twaddington merged commit 1372cac into twaddington:master Feb 19, 2016

@twaddington

This comment has been minimized.

Show comment
Hide comment
@twaddington

twaddington Feb 19, 2016

Owner

Hey @paulcpederson, I just pushed this stuff up to prod. Let me know if you see any issues. I'm not sure how to verify that your latest changes went out.

Owner

twaddington commented Feb 19, 2016

Hey @paulcpederson, I just pushed this stuff up to prod. Let me know if you see any issues. I'm not sure how to verify that your latest changes went out.

@paulcpederson

This comment has been minimized.

Show comment
Hide comment
@paulcpederson

paulcpederson Feb 19, 2016

Collaborator

@twaddington looks good! The site should look pretty much exactly the same, just less requests. :) IT looks like it's referencing the correct js/css files, and the form stuff seems to be reporting errors properly.

Collaborator

paulcpederson commented Feb 19, 2016

@twaddington looks good! The site should look pretty much exactly the same, just less requests. :) IT looks like it's referencing the correct js/css files, and the form stuff seems to be reporting errors properly.

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