Getting over Frameworks without making an ass of yourself
Getting over Frameworks
Setting the mood
Benefit
Getting it right
Moving on
1. Setting the mood: Your workflow soundtrack
What do you mean by “frameworks” anyway?
What do you mean by “frameworks” anyway?
jQuery, Bootstrap, React, Foundation…
What do you mean by “frameworks” anyway?
jQuery, Bootstrap, React, Foundation, SASS, Less, Coffeescript, PostCSS, COMPASS, BEM, OCSS, ITCSS, SMACSS,
What do you mean by “frameworks” anyway?
Simple!
What do you mean by “frameworks” anyway?
What do you mean by “frameworks” anyway?
What do you mean by “frameworks” anyway?
“I know it when I see it.”
— Potter Stuart
2. Benefit: Using frameworks
usually comes with documented functionality + components
unifies developer approaches
takes away platform philosophy
enforces codes styles / best practice
enforces an extension system
shims over edge cases
sometimes shims over several platforms
eases learning curve on platform
2. Who benefits?
Designers and Concepters
Project Managers
System Developers
Platform newcomers
Prototyping Devs
Lazy Devs
2. Benefit: Dump Bootstrap!
2. Benefit: Dump your CMS!
2. Benefit: Dump all frameworks!
3. Getting it right
Moving on is easier if you had a good start
3. Getting it right: That Stackoverflow response
“Just use jQuery”
“Just use Bootstrap”
“Just use React”
That Stackoverflow response last season
“Just use 960.gs”
“Just use Angular”
That Stackoverflow response the season before
“Just use prototype.js”
“Just use YAML”
“Just use backbone.js”
3. Getting it right: Using it right
That gut feeling.
3. Getting it right: Using it right
Gut feeling > Stackoverflow*
* Ok-ok – for the uneducated answers anyway
3. Getting it right: Using it right
How does the framework describe itself?
Is it called Boilerplate, Kickstarter, Foundation, Bootstrap, hackable?
Then it's may not be a good idea to make it a deep dependency
Does it come with the features you need? Or are you bending the system from the start on?
3. Not getting it right
Ok, so it´s a mess
3. Ok, so it´s a mess
Starting from scratch: failure * recipe **.
* Dirk Gadsden
** Joel Spolsky
3. Ok, so it´s a mess
* Joel Spolsky
3. Ok, so it´s a mess: Refactoring
remove framework components
kill dependencies
Don't reinvent the markup
“strangle” unused code
remove elaborate shims
use straw puppet code to replace unnecessary steps (eg. for Compass or legacy build tools)
keep built/static copies for
diff against original code
4. Moving on
“I´d rather be lonely than happy with somebody else”
— Gus Kahn
4. Moving on
Your´re not lonely, though.
4. Moving on
Every relation leaves marks.
4. Moving on: Leaving a mark
1. Good ideas stick.
4. Good ideas stick: jQuery in a nutshell
window.$ = document.querySelectorAll.bind(document);
Node.prototype.on = window.on = function (name, fn) {
this.addEventListener(name, fn);
}
NodeList.prototype.__proto__ = Array.prototype;
NodeList.prototype.on = NodeList.prototype.addEventListener = function (name, fn) {
this.forEach(function (elem, i) {
elem.on(name, fn);
});
}
— Paul Irish
4. Good ideas stick: Building your own grid
4. Good ideas stick: Your next CMS
Grasp abstractions that are applicable in many other systems.
Use the same UX wording for easier transition
Organize your templates in a way that they don't depend on system plugins.
4. Good ideas stick: Copying the interface
<?php
$years = page('projects')->children()->groupBy('year');
foreach($years as $year => $items): ?>
<h2><?php echo $year ?><h2>
<ul>
<?php foreach($items as $item) : ?>
<li><?php echo $item->title() ?></li>
<?php endforeach; ?>
</ul>
<?php endforeach ?>
