Websites & Frameworks: Web at Evernote

Ryan BurgessL e a d F r o n t E n d E n g i n e e r, E v e r n o t e@burgessdryan

How we structure web teams at Evernote

#ec2014

• Evernote.com

• Evernote Market

• Web Client

Evernote.com

#ec2014

• Introducing Evernote

• Acquisition / sign ups

• Upgrading accounts

• Marketing

• Support

Evernote Web Client

#ec2014

• Evernote application in the browser

• Create and edit notes

• Upgrading account

• Update settings

Evernote Market

#ec2014

• E-commerce site

• Showcase our physical products

Websites & Frameworks: Web at Evernote

#ec2014

• Overview of web development at Evernote

• Example projects

• CSS Pre-processors at Evernote

• Our Sass build

• Tools we use for automation

• Keeping code consistent

• Future development at Evernote

#ec2014

Overview of web development at Evernote

Multiple websites

#ec2014

Responsive web design

#ec2014

Browser support

#ec2014

25 languages

#ec2014

Leveraging the latest and greatest

#ec2014

Optimization

#ec2014

#ec2014

Evernote homepage project

The creative team

#ec2014

• Writers

• Designers

• Photographers

• Production designers

• Translators

• Developers

Device specific screenshots

#ec2014

We load device specific images for Mac

and PC.

Evernote homepage assets

#ec2014

• 1,336 total images

• 1,082 hero images

• 50 CSS files

#ec2014

CSS pre-processors

CSS pre-processors we use at Evernote

#ec2014

Benefits of CSS pre-processors

#ec2014

• Joining of multiple files

• Ability to define variables

• Ability to create mixins

• Mathematical functions

Homepage hero Sass module

#ec2014

#ec2014

Evernote Sass build

SMACSS

#ec2014

Our Sass structure is based off of the

SMACSS methodology.

Sass build

#ec2014

Our Sass build structure

• Base

• Layout

• Modules

• Themes

h t t p s : //g i t h u b . c o m /e v e r n o t e /s a s s - b u i l d - s t r u c t u r e

Base

#ec2014

• Vendor dependancies (Compass, Foundation)

• Authored dependancies (Mixins, variables, Extends)

• Fonts

• Reset

h t t p s : //g i t h u b . c o m /e v e r n o t e /s a s s - b u i l d - s t r u c t u r e

Layout

#ec2014

• Responsive Grid

• Page specific layouts

h t t p s : //g i t h u b . c o m /e v e r n o t e /s a s s - b u i l d - s t r u c t u r e

Modules

#ec2014

h t t p s : //g i t h u b . c o m /e v e r n o t e /s a s s - b u i l d - s t r u c t u r e

Broken up into code blocks

• Header

• Footer

• Navigation

• Hero image

Example module

#ec2014

Themes

#ec2014

h t t p s : //g i t h u b . c o m /e v e r n o t e /s a s s - b u i l d - s t r u c t u r e

The themes directory contains any specific styles that a page may

need to change from the generic layout or modules.

Page specific Sass file

#ec2014

Benefits of our Sass build

#ec2014

h t t p s : //g i t h u b . c o m /e v e r n o t e /s a s s - b u i l d - s t r u c t u r e

• Cleaner code

• More agile development

• More consistency

• Modular reusable code

• Better quality

#ec2014

Tools that help

JavaScript task managers

#ec2014

Grunt running in terminal

#ec2014

Benefits of task managers

#ec2014

• Automates tasks while we’re developing

• Saves time

• Watch for changes in the code

• Helps keep files consistent

• Optimizes our code base

• Compiles our CSS

• Minifies CSS and JavaScript

Grunt and Gulp tasks we use

#ec2014

• Compile Sass/Less to CSS

• JShint for JavaScript linting

• Browserify to compile JavaScript

• Uglify to minify JavaScript

Browserify

#ec2014

Browserify with Grunt and Gulp in our

build allows us to make our front end

JavaScript code in modules and share

them as dependencies and compile

into one file.

Benefits of Browserify

#ec2014

• Allows us to have modular reusable JavaScript

• Less HTTP calls from the browser

• Better quality control

JavaScript Browserify modules

#ec2014

Pootle translation

#ec2014

Pootle is an online tool that makes the

process of translating so much simpler.

h t t p s : //g i t h u b . c o m /e v e r n o t e /p o o t l e

#ec2014

Code consistency

Evernote CSS style guide

#ec2014

An online CSS style guide to help keep

our CSS more consistent.

h t t p s : //g i t h u b . c o m /e v e r n o t e /c s s - s t y l e - g u i d e

Items in our CSS style guide

#ec2014

h t t p s : //g i t h u b . c o m /e v e r n o t e /c s s - s t y l e - g u i d e

• Basic code formatting

• Property order

• Commenting

• Color values

Evernote JavaScript style guide

#ec2014

An online JavaScript style guide to

help keep our JavaScript more

consistent in our builds.

h t t p s : //g i t h u b . c o m /e v e r n o t e / j a v a s c r i p t - s t y l e - g u i d e

Items in our JavaScript style guide

#ec2014

• Strings

• Variables

• Semicolons

• Commas

• Naming conventions

• Tab spacing

h t t p s : //g i t h u b . c o m /e v e r n o t e / j a v a s c r i p t - s t y l e - g u i d e

Naming conventions

#ec2014

• File names are in lowercase

• Words are spaced with a dash

• Retina images have “@2x” appended

• Language specific files have language code appended

#ec2014

Future of Front End Development at Evernote

#ec2014

Sharing more of our code on Github h t t p s : //g i t h u b . c o m /e v e r n o t e

Updates to the Evernote API

#ec2014

Using more Node.js

#ec2014

Benefits of Node.js

#ec2014

• Rapid-innovation and delivery

• High-performance

• Developer happiness

• JavaScript for the backend

#ec2014

Questions?

Ryan BurgessL e a d F r o n t E n d E n g i n e e r, E v e r n o t e@burgessdryan