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

Transcript

1. MODERN
   FED STACK
   NETCRAFT
   

   View Slide

2. Tools & Workflow
   Scaffolding
   Layers & Abstractions
   Your Standards based, Pattern designed, Future
   friendly, Performance optimized code :)
   

   View Slide

3. FOUNDATION
   Stuff your code needs to know
   

   View Slide

4. STANDARDS
   

   View Slide

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

   View Slide

6. CODING STANDARDS & LINTING
   // IDIOMATIC JS
   // ISOBAR
   // IDIOMATIC CSS
   // GOOGLE STANDARDS
   // JSLint
   // DOUGLAS CROCKFORD
   // CSSLint
   

   View Slide

7. WEB PERFORMANCE & USER EXPERIENCE
   JAVASCRIPT
   & DOM
   HTTP
   REQUESTS
   REFLOWS
   CACHING
   RENDERING
   SIZE
   

   View Slide

8. ADAPTIVE & FUTURE FRIENDLY
   

   View Slide

9. SCAFFOLDING
   Your about: blank
   

   View Slide

10. STARTER
    

    View Slide

11. STARTER
    

    View Slide

12. JAVASCRIPT LIBRARIES
    

    View Slide

13. PRESENTATION LAYER
    UI Framework
    

    View Slide

14. TOOLS & ABSTRACTIONS
    

    View Slide

15. TOOLS & ABSTRACTION
    

    View Slide

16. CSS ARCHITECTURE
    SMACSS
    CSS
    OO
    

    View Slide

17. SCALABLE GRAPHICS
    Drop
    Shadow
    Font
    Icon
    Gradient Borders
    

    View Slide

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
    

    View Slide

19. ADDITIONAL GRAPHICS & MEDIA
    3D TRANSFORM
    

    View Slide

20. ADDITIONAL GRAPHICS & MEDIA
    CANVAS
    

    View Slide

21. ADDITIONAL GRAPHICS & MEDIA
    SVG
    

    View Slide

22. ADDITIONAL GRAPHICS & MEDIA
    AUDIO
    

    View Slide

23. ADDITIONAL GRAPHICS & MEDIA
    WEB GL
    

    View Slide

24. ADDITIONAL GRAPHICS & MEDIA
    VIDEO
    

    View Slide

25. BEHAVIOR LAYER
    JAVASCRIPT & APIs
    

    View Slide

26. SEPERATION OF CONCERNS
    CONTROLLER
    MODEL VIEW
    Publish Click
    Render
    Save
    Property
    Update
    Update
    DOM
    User
    Action
    Property
    Change
    Subscribe
    

    View Slide

27. MVC FRAMEWORKS
    

    View Slide

28. TEMPLATES
    

    View Slide

29. ASYNCHRONOUS MODULE DEFINITION (AMD)
    

    View Slide

30. ADDITIONAL JAVASCRIPT FRAMEWORKS
    

    View Slide

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

    View Slide

32. WORKFLOW TOOLS
    Develop & build like a boss
    

    View Slide

33. YEOMAN
    

    View Slide

34. MIDDLEMAN
    

    View Slide

35. SUBLIME TEXT 2
    

    View Slide

36. BASED ON
    

    View Slide

37. TEAM WORKFLOW
    FEDs are Middleman
    

    View Slide

38. PROJECT MANAGEMENT
    

    View Slide

39. LEARN 
    

    View Slide

40. THANK YOU
    

    View Slide