Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Netcraft Modern FED Stack

D46e74f575bd0417b5cb638202ec99d4?s=47 Serge Krul
October 06, 2013

Netcraft Modern FED Stack

An overview of the standards, tools, technologies and best-practices standing at the heart of our development process.

Resources list for this lecture:
https://gist.github.com/krulik/9342774

D46e74f575bd0417b5cb638202ec99d4?s=128

Serge Krul

October 06, 2013
Tweet

Transcript

  1. MODERN FED STACK NETCRAFT

  2. Tools & Workflow Scaffolding Layers & Abstractions Your Standards based,

    Pattern designed, Future friendly, Performance optimized code :)
  3. FOUNDATION Stuff your code needs to know

  4. STANDARDS

  5. MODERN JAVASCRIPT MODULES OBJECT ORIENTED DESIGN PATTERNS ECMA SCRIPT 5

    NAMESPACES MIXINS
  6. CODING STANDARDS & LINTING // IDIOMATIC JS // ISOBAR //

    IDIOMATIC CSS // GOOGLE STANDARDS // JSLint // DOUGLAS CROCKFORD // CSSLint
  7. WEB PERFORMANCE & USER EXPERIENCE JAVASCRIPT & DOM HTTP REQUESTS

    REFLOWS CACHING RENDERING SIZE
  8. ADAPTIVE & FUTURE FRIENDLY

  9. SCAFFOLDING Your about: blank

  10. STARTER

  11. STARTER

  12. JAVASCRIPT LIBRARIES

  13. PRESENTATION LAYER UI Framework

  14. TOOLS & ABSTRACTIONS

  15. TOOLS & ABSTRACTION

  16. CSS ARCHITECTURE SMACSS CSS OO

  17. SCALABLE GRAPHICS Drop Shadow Font Icon Gradient Borders

  18. RESPONSIVE DESIGN ASSET MANAGEMENT FLUID GRID L A Y O

    U T PAT TERNS P O I N T E R E V E N T S M E D I A P E R F O R M A N C E
  19. ADDITIONAL GRAPHICS & MEDIA 3D TRANSFORM

  20. ADDITIONAL GRAPHICS & MEDIA CANVAS

  21. ADDITIONAL GRAPHICS & MEDIA SVG

  22. ADDITIONAL GRAPHICS & MEDIA AUDIO

  23. ADDITIONAL GRAPHICS & MEDIA WEB GL

  24. ADDITIONAL GRAPHICS & MEDIA VIDEO

  25. BEHAVIOR LAYER JAVASCRIPT & APIs

  26. SEPERATION OF CONCERNS CONTROLLER MODEL VIEW Publish Click Render Save

    Property Update Update DOM User Action Property Change Subscribe
  27. MVC FRAMEWORKS

  28. TEMPLATES

  29. ASYNCHRONOUS MODULE DEFINITION (AMD)

  30. ADDITIONAL JAVASCRIPT FRAMEWORKS

  31. ADDITIONAL JAVASCRIPT APIs Geolocation Web Storage & Offline Workers &

    CORS Web Sockets
  32. WORKFLOW TOOLS Develop & build like a boss

  33. YEOMAN

  34. MIDDLEMAN

  35. SUBLIME TEXT 2

  36. BASED ON

  37. TEAM WORKFLOW FEDs are Middleman

  38. PROJECT MANAGEMENT

  39. LEARN 

  40. THANK YOU