Websites & framworks: web at Everntoe
•
1 like•344 views
A presentation by Ryan Burgess - Lead Front Engineer at Evernote. The presentation gives insights into some of the front end technologies leveraged at Evernote (Grunt, Gulp, JavaScript, Node.js, Sass). Find out how Evernote handles multiple websites in 26 languages.
Recommended
Recommended
More Related Content
Similar to Websites & framworks: web at Everntoe
Similar to Websites & framworks: web at Everntoe (20)
Recently uploaded
Recently uploaded (20)
Websites & framworks: web at Everntoe
- 1. Websites & Frameworks: Web at Evernote Ryan Burgess Lead Front End Engineer, Evernote @burgessdryan
- 2. How we structure web teams at Evernote #ec2014 • Evernote.com • Evernote Market • Web Client
- 3. Evernote.com #ec2014 • Introducing Evernote • Acquisition / sign ups • Upgrading accounts • Marketing • Support
- 4. Evernote Web Client #ec2014 • Evernote application in the browser • Create and edit notes • Upgrading account • Update settings
- 5. Evernote Market #ec2014 • E-commerce site • Showcase our physical products
- 6. 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
- 7. Overview of web development at Evernote #ec2014
- 9. Responsive web design #ec2014
- 12. Leveraging the latest and greatest #ec2014
- 14. #ec2014 Evernote homepage project
- 17. The creative team #ec2014 • Writers • Designers • Photographers • Production designers • Translators • Developers
- 19. Device specific screenshots We load device specific images for Mac and PC. #ec2014
- 20. Evernote homepage assets #ec2014 • 1,336 total images • 1,082 hero images • 50 CSS files
- 22. CSS pre-processors we use at Evernote #ec2014
- 23. Benefits of CSS pre-processors #ec2014 • Joining of multiple files • Ability to define variables • Ability to create mixins • Mathematical functions
- 24. Homepage hero Sass module #ec2014
- 25. #ec2014 Evernote Sass build
- 26. SMACSS #ec2014 Our Sass structure is based off of the SMACSS methodology.
- 27. Sass build #ec2014 h t t p s : //g i t h u b .com/eve r n o te /s a s s - b u i l d - s t r u c t u re Our Sass build structure • Base • Layout • Modules • Themes
- 28. Base #ec2014 h t t p s : //g i t h u b .com/eve r n o te /s a s s - b u i l d - s t r u c t u re • Vendor dependancies (Compass, Foundation) • Authored dependancies (Mixins, variables, Extends) • Fonts • Reset
- 29. Layout #ec2014 h t t p s : //g i t h u b .com/eve r n o te /s a s s - b u i l d - s t r u c t u re • Responsive Grid • Page specific layouts
- 30. Modules #ec2014 h t t p s : //g i t h u b .com/eve r n o te /s a s s - b u i l d - s t r u c t u re Broken up into code blocks • Header • Footer • Navigation • Hero image
- 32. Themes #ec2014 h t t p s : //g i t h u b .com/eve r n o te /s a s s - b u i l d - s t r u c t u re The themes directory contains any specific styles that a page may need to change from the generic layout or modules.
- 33. Page specific Sass file #ec2014
- 34. Benefits of our Sass build #ec2014 h t t p s : //g i t h u b .com/eve r n o te /s a s s - b u i l d - s t r u c t u re • Cleaner code • More agile development • More consistency • Modular reusable code • Better quality
- 35. #ec2014 Tools that help
- 36. JavaScript task managers #ec2014
- 37. Grunt running in terminal #ec2014
- 38. 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
- 39. Grunt and Gulp tasks we use #ec2014 • Compile Sass/Less to CSS • JShint for JavaScript linting • Browserify to compile JavaScript • Uglify to minify JavaScript
- 40. 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.
- 41. Benefits of Browserify #ec2014 • Allows us to have modular reusable JavaScript • Less HTTP calls from the browser • Better quality control
- 42. JavaScript Browserify modules #ec2014
- 43. Pootle translation #ec2014 h t t p s : //g i t h u b .com/eve r n o te /p o o t l e Pootle is an online tool that makes the process of translating so much simpler.
- 45. Evernote CSS style guide An online CSS style guide to help keep our CSS more consistent. #ec2014 h t t p s : //g i t h u b .com/eve r n o te /c s s - s t y l e - g u i d e
- 46. Items in our CSS style guide #ec2014 h t t p s : //g i t h u b .com/eve r n o te /c s s - s t y l e - g u i d e • Basic code formatting • Property order • Commenting • Color values
- 47. Evernote JavaScript style guide An online JavaScript style guide to help keep our JavaScript more consistent in our builds. #ec2014 h t t p s : //g i t h u b .com/eve r n o te / j ava s c r i p t - s t y l e - g u i d e
- 48. Items in our JavaScript style guide #ec2014 h t t p s : //g i t h u b .com/eve r n o te / j ava s c r i p t - s t y l e - g u i d e • Strings • Variables • Semicolons • Commas • Naming conventions • Tab spacing
- 49. 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
- 50. Future of Front End Development at Evernote #ec2014
- 51. Sharing more of our code on Github #ec2014 h t t p s : //g i t h u b .com/eve r n o te
- 52. Updates to the Evernote API #ec2014
- 53. Using more Node.js #ec2014
- 54. Benefits of Node.js #ec2014 • Rapid-innovation and delivery • High-performance • Developer happiness • JavaScript for the backend
- 55. #ec2014 Questions? Ryan Burgess Lead Front End Engineer, Evernote @burgessdryan