The state of front end architecture_in_2015

The State of Front End Architecture in 2015Trends, Tools, and Workflows

Aidan Foster - Foster Interactive - @finteractive

AIDAN FOSTER - FRONT END ARCHITECT

Sass T.O

meetup.com/Sass-Toronto/meetup.com/drupalTO/ drupalnorth.org

FOSTERINTERACTIVE.COM

“ You have to know the past to understand the present. ”

-Carl Sagan

― Carl Sagan

Pre-mobile Era

2007 2008 2009 2010 2011 2012 2013 2014 2015

iPhone 1320x480 px

HTC G1“HTC Dream” 320x480 px

ipad 1768x1024 px

iphone 4640x960 px

Samsung Note 1Phablets

800x1280 px

2008 2009 2010 2011 2012 2013 2014 2015

windows 8???x??? px

Surface RT1366x768 px

xBox / TV1920x1080 px

Android Wear~250-400 square px

(Wear Internet Browser)

1 Billion Android

Testing a. Supported Devices b. Browsers to Test

c. Screen sizes! a x b x c = !@%$#!&$

$

Performance Mobile Networks

Image = screen size

#

Device Formats Screen Size

Display Density UI Controls

HTML Support

!"

Planning & Design Cramming in Content

Design Process

%

Code Complexity More code

More Flexible

&

2007 2008 2009 2010 2011 2012 2013 2014 2015

" “retina” iphone 4 (“iphone 1” rez)

'ipad 1 iphone “signature”

phablets (“~ iphone1” rez) "

Android (“iphone” Agent )"

Dedicated Mobile m.website.com "

WURFL“everything” User Agent Capabilities database

"

''

"

BB Passport… Nice, Samsung S4… Naughty,

Performance

#

Device Formats

!"

Testing

$

Planning & Design

%

Code Complexity

&

Dedicated Mobile in 2008

Kinda Worked

Not so much in 2015

Not so much in 2015

2007 2008 2009 2010 2011 2012 2013 2014 2015

Early Mobile Era (Dedicated Mobile Dark Ages)

Boston Globe

Ethan Marcotte

2008 2009 2010 2011 2012 2013 2014 2015

Early Mobile Era (Dedicated Mobile Dark Ages)

Boston Globe Year of Responsive Design (Mashable))

AODA Accessibility WCGA 2.0 “A”)

Shopify 50+% traffic on mobile*

Google Mobilegeddon+

Device Formats

!"

Performance

#

Testing

$

Planning & Design

%

Code Complexity

&

RESPONSIVE DESIGN

2012

Device Formats

!"

Performance

#

Testing

$

Planning & Design

%

Code Complexity

&

RESPONSIVE DESIGN

2012

Performance - Page Load time,

0 2 4 6 8 10

10

4

1

0.1 Instant

Freely Moving

Mind Wanders

No Longer Able to Focus on Task

Seconds

“Breaking the 1000ms Time to Glass Mobile Barrier”

http://www.youtube.com/watch?v=Il4swGfTOSM

1098kB

1324kB

1549kB

1775kB

2000kB

Sep 12

Nov 12

Feb 13

Apr 13

Jul 1

3

Sep 20

13

Dec 13

Mar 14

Jul 1

4

Aug 14Oct

14Ja

n 15Mar

15

Total Transfer Size(kB)

http://httparchive.org/trends.php?s=All&minlabel=Sep+1+2012&maxlabel=Jun+1+2015

Performance - Page Load time,

Performance Budget,

target (4s or less)

Test Deploy

Measure competitors

http://danielmall.com/articles/how-to-make-a-performance-budget/ http://cognition.happycog.com/article/designing-with-a-performance-budget

Redesign

Develop

Automated Performance Tools,

http://www.webpagetest.org/

Automated Performance Tools,

developers.google.com/speed/pagespeed/insightshttp://www.webpagetest.org/

Bitmap (.jpg, .png)

Vector (.svg)

Scalar Vector Graphics-

Great for Icons + Logos

http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/

Responsive Artwork Small = Simple

Large = Complex

http://webdesign.tutsplus.com/articles/manipulating-svg-icons-with-simple-css--webdesign-15694

Colour Controlled by CSSSingle file for all variations

Scalar Vector Graphics-

<Picture> Element-

http://blog.cloudfour.com/responsive-images-101-definitions/

SASS - CSS PREPROCESSOR ,

http://sass-lang.com

SASS - CSS PREPROCESSOR ,

styles.css

SASS

Coder - Friendly, Bite-sized Sass “partials”

Style Tiles

%

…a common visual language between the

designers and the stakeholders and

provide a catalyst for discussions around the

preferences and goals of the client.

Samantha Warren

Style Tiles

%Design Systems vs Designing Pages

Less Like a page, more like a brand guide

Component Based Design - “Kitchen Sink Frameworks”,

Zurb Foundation Bootstrap

Component Based Design,

“Roll your own” Bootstrap - http://patternlab.io/


Main Menu Component


Main Menu Component

Masthead Component


Main Menu Component

Masthead Component

Action Component




Living Style Guides,

http://www.smashingmagazine.com/2015/04/13/an-in-depth-overview-of-living-style-guide-tools/

styles.css

SASS

Sass “partials”


http://www.smashingmagazine.com/2015/04/13/an-in-depth-overview-of-living-style-guide-tools/

styles.css

SASS

Sass “partials”style guide

website

Hologram



Automated Visual Regression Testing,

Screen Shots Compare Start Test Reports

%

http://www.phase2technology.com/blog/css-testing-with-phantomcss-phantomjs-casperjs-and-grunt/


https://github.com/garris/BackstopJS


Browser Sync / Ghost Lab,

OOCSS Object Oriented CSS (http://oocss.org/)

SMACSS Scalable and Modular Architecture for CSS (http://smacss.com/)

BEM Block - Element - Modifier (http://bem.info)

Drupal Coding Standards https://www.drupal.org/coding-standards/css/architecture

CSS Naming Conventions,

SCSS Lint - The Coding Convention Enforcer,

<SCSS LINT> ME

SCSS Lint - The Coding Convention Enforcer,

./

All your team use the same customized “rules” for Sass Code

fea· tures (noun) a) the structure, form, or appearance

especially of a person

& So that’s Lot of Tools…

fea· tures (noun) a) the structure, form, or appearance

especially of a person

& So that’s Lot of Tools…

Task Automation,

gulpjs.com gruntjs.com

Task Automation - when I’m coding,

Style Guide

SCSS Lint

Compile CSS

ON SAVE

Refresh Browsers

Task Automation - Pre-deploy Check,

Measure competitors

Develop

Style Guide

SCSS Lint

Compile CSS

Compress Images

Compress SVGs

Run Production

Build

legacy browser

css prefix

CSS Regression

Test%Ready for Q/A

0

It’s not easy to setup all these tools

1

#

Team Velocity

Fewer Bugs in QA

Optimized Performance

2Recycleable

Add 1 thing into the mix because we all have to start somewhere. Take it in baby steps

Date post:	21-Aug-2015
Category:	Technology
Upload:	aidan-foster
View:	262 times
Download:	2 times

The state of front end architecture_in_2015

Technology