Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece

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

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

design!

neptune

much of our JavaScript wasn’t terrible, just terribly organized

reorganization was top priority

separation, actually

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/

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

Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece

Technology

Transcript of Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece