View
6.721
Download
3
Category
Preview:
DESCRIPTION
A story about what happens when you don't design your front end for the future, and how it make it better when things get messy.
Citation preview
Transforming Front-end Disaster Code™ Into a Maintainable Masterpiece
@dangribbin
Hi, I’m Dan Gribbin
Software Engineer brand networks
Web Development Teacher rochester brainery
front end js + css + html
design is critical to the development process
.psd
design (a plan)
best available solution | constraints
get requirements → write code → ship?
get requirements → write code → ship?
no.
plan system→ then write code
yep
disaster!
alpine
alpine*internal name - not actual thing name
initial launch
- tight deadlines- limited front-end resources
- good - fast - cheap
(pick two)
our plan lacked detail it needed for the future of the front-end
Technical Debtpoor engineering complicates future work
software entropy
complexity will increase unless an effort is made against it
we set our front end up for failure
alpine launch → SDLC
2 week sprintsrequirements → code →release
technicalDebt++;
sprint : function() {
},
performance
page load times
15 seconds
: (
poor engineering → poor user experience
effects on our page load- render-blocking scripts - loading all resources on all pages - lots of code, no minification
maintainability
Time and ease of… - fixing a bug - developing a new feature
impact?
↑ feature work dev time ↓ velocity
costs of an unmaintainable codebase to you and your stakeholders - time - money - frustration
influences on maintainability
JS - globals - intermixed functionality
SASS/CSS- long, overly specific selectors - confusing naming conventions
- Styles not logically separated- Hitting IE9 selector limit
moraleentropic products affect the teams that work on them
our software problems don’t just belong to one person
your disaster is your team’s disaster too.
disasters affect morale (relationships), motivation, and productivity
initial fixes
initial fixes … mostly unsuccessful : /
we needed a do-over
1UP
design!
neptune
much of our JavaScript wasn’t terrible, just terribly organized
reorganization was top priority
separation, actually
MVC
Some MVC frameworksember, backbone, angular, knockout, dojo, YUI, CanJS, Maria, Polymer, React, cujo, Montage, Ext, Sammy, Stapes, Epitome, soma, DUEL, Kendo UI, PureMVC, Olives, Plastron, Dijon, rAppid.js, Deft, Aria, Exoskeleton, Atma, Ractive, ComponentJS
MVC frameworksember, backbone, angular, knockout, dojo, YUI, CanJS, Maria, Polymer, React, cujo, Montage, Ext, Sammy, Stapes, Epitome, soma, DUEL, Kendo UI, PureMVC, Olives, Plastron, Dijon, rAppid.js, Deft, Aria, Exoskeleton, Atma, Ractive, ComponentJS
was one of these right for us?
constraints time + experience
AMD + RequireJSdefine([’controllers/article-controller.js’], function(ArticleController) { ArticleController.init(); } );
neptune’s front end stack
resultscut page load time by 80% cut JS per-page by 70% cut CSS per-page by 75%
-huge maintainability gains -framework for future work -testable code
where did we suck?
estimation.seriously. ouch.
awesome team-building experience
Things you can do right now to clean up your front end
Cleaning up means…-optimizing for performance -promoting maintainability -ensuring reliability
optimize for performance
developer tools are your best friends
using an image sprite? you should be! !
one request → all your icons
no <script>’s in your <head>
<head> <title>Bad Ideas, Inc.</title> <script src=“main.js”></script> </head>
Instead…… <script src=“main.js”></script> </body>
use a build toolget some help optimizing
In the beginning, was make
then, this guy stuck his nose in
a challenger appears?
which one should you use?
whichever one makes you happy.
minimize and defer resource loading !
track down unused CSSgrunt-uncss gulp-uncss
minify & combinegrunt-contrib-concat grunt-contrib-uglify !
gulp-uglify gulp-concat
optimize imagesgrunt-contrib-imagemin gulp-imagemin !
or, use an app like ImageOptim for manual operations
cache jQuery selections in your code
var galleryItems = $(‘.gallery-item’)
http://training.bocoup.com/screencasts/the-importance-of-caching-jquery-selections/
promoting maintainability
a hallmark of a maintainable codebase is organization
short term fixes
using less/sass?be careful of the nesting trap.
Check your styles
instead of !
li { display: block; } !
li img { width: 50px; }
you can write !
li { display:block; !
img { width: 50px; } }
which is awesome! but be careful.
the following Disaster SASS™ is real code pulled from alpineviewer discretion is advised
body.single { .outer-wrapper { #content{ #content_column{ ul { li{ a{ img { width: 50px !important; } } } } } } } }
which compiles to…body.single .outer-wrapper #content #content_column ul li a img { width: 50px !important; }
to override that, we’d need a selector with a higher specificity and importance
see how this might get out of hand quickly?
what if all your styles were so messy? ours were.
.gallery img { width: 50px; }
how about this instead?
readable, reusable, maintainable
also, don’t use !important
if you need !important, you have bigger problems to solve
Collaborate on a standards document
helpful for getting the entire team thinking about quality and consistency
involvement increases buy in
collaboration can be an effective and positive teamwork experience
long term goals
organization through separation(and avoiding their opposites)
modularize
JavaScript - AMD / MVCCSS - SASS/LESS
modular code will help you create extensible features
enforce separation of: -style -presentation -behavior
use class names for on-the-fly style adjustments
.addClass(‘error’)
.css(‘border’, ‘red’)
instead of
✓ reusable ✓ consistent \o/ ✓ maintainable
keeping JavaScript out of HTML means only having to look in one filetype
onclick=“doThing()”
el.on(‘click’, doThing)
instead of
navigating stakeholder relations
clear, understandable communicationhow is what you’re saying relevant to business goals?
the quicker solution will often lead to more cost down the road
negotiation
great client relationships are possible!
remember
this is effort against complexity
making effort against complexity benefits:
- you- future you - your team - your stakeholders
make future-you love past-you
the perfect !
tool/framework/library !
does not exist
plan & design software for the situation at hand
thanks!
slides here: @dangribbin
Recommended