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

Getting into Frontend Dev Today

Jake Trent
November 11, 2017

Getting into Frontend Dev Today

You've been outside the frontend scene for years and are wondering what that world looks like. Here's one man's take on things worth noticing and potentially learning as you start getting back into it. Find something in the survey that interests you and commit to making something out of it.

Jake Trent

November 11, 2017
Tweet

More Decks by Jake Trent

Other Decks in Programming

Transcript

  1. GETTING INTO
    FRONTend DEV
    Jake Trent

    View full-size slide

  2. WHY TODAY
    Exciting
    Satisfying
    Develop self
    Market need

    View full-size slide

  3. PREREQs TODAY
    Interest
    Commitment
    Don’t need to be an artist

    View full-size slide

  4. Purpose TODAY
    Feed interest
    Today’s environment
    Radar
    First steps

    View full-size slide

  5. SPECTRUM TODAY
    Dabble - a few toys
    Aware - in a pinch
    Focus - invest career

    View full-size slide

  6. Disclaimers TODAY
    Hot takes
    Exposed to
    Many paths

    View full-size slide

  7. FRONTEND JOBS TODAY
    Marketing
    Biz app dev
    Web game dev

    View full-size slide

  8. CORE TODAY
    Design
    HTML
    CSS
    JS

    View full-size slide

  9. Renderable TODAY
    All browser-native
    Flash is dead
    Hierarchy
    Semantics

    View full-size slide

  10. Templates TODAY
    Web Components
    JSX
    Library-specific

    View full-size slide

  11. Accessibility TODAY
    Sight-impaired
    Motion-impaired
    Touch-enabled

    View full-size slide

  12. CSS TODAY
    CSS3
    Cross-browser ++
    Browser prefixes --
    Better layouts

    View full-size slide

  13. Layout TODAY
    Flexbox
    CSS Grid
    Sameness

    View full-size slide

  14. BROWSERS TODAY
    Evergreen
    Speed, capability++
    Mobile

    View full-size slide

  15. Viewports TODAY
    From anywhere
    Responsive web design

    View full-size slide

  16. Movement TODAY
    Language change
    Progressive community
    Browsers keeping pace

    View full-size slide

  17. JS Evolution TODAY
    Ecma TC39 committee
    Active!
    Stages

    View full-size slide

  18. JS Tooling TODAY
    Node-based
    Bundlers
    Compilers
    Task runners --

    View full-size slide

  19. Analysis Tooling TODAY
    eslint
    prettier

    View full-size slide

  20. Modules TODAY
    ES6
    CommonJS
    Abstractions
    Design

    View full-size slide

  21. Compilation TODAY
    Traceur - 1st
    Babel - today
    Addicted

    View full-size slide

  22. Helping Browsers TODAY
    Polyfills - core-js
    Transpile - babel

    View full-size slide

  23. New Languages TODAY
    Typescript
    Elm
    ReasonML

    View full-size slide

  24. TYPES IN JS TODAY
    Static typing
    Flowtype
    Typescript
    Tooling

    View full-size slide

  25. CSS-IN-JS TODAY
    Glamor
    Styled-components
    Aphrodite
    Componentization

    View full-size slide

  26. FRAMEWORKS TODAY
    React
    Angular
    Vue

    View full-size slide

  27. Testing TODAY
    Jest
    Unit
    Functional/browser
    Snapshot

    View full-size slide

  28. TODAY
    Environment

    View full-size slide

  29. Editors TODAY
    Editor - VSCode
    IDE - Webstorm
    RSI/PTSD - Vim
    Textpad/nano

    View full-size slide

  30. Source Control TODAY
    Git
    Dropbox --
    FTP --

    View full-size slide

  31. Your Team TODAY
    Integrated
    Not alone, slicing --
    Some specialized

    View full-size slide

  32. Project Size TODAY
    Larger codebase
    More in client
    More programmers
    Architecture and patterns

    View full-size slide

  33. SPA DAY
    Single-page apps
    Long-term state
    Routing
    Render
    Logic

    View full-size slide

  34. Server Rendering TODAY
    “Isomorphic”/“Universal”
    Performance
    SEO

    View full-size slide

  35. APIS TODAY
    REST - JSONAPI.org
    GraphQL - relay/apollo
    Websockets - socket.io

    View full-size slide

  36. TODAY
    Deployment

    View full-size slide

  37. Publishing TODAY
    npm
    Versioning - Semver.org
    Dependency management

    View full-size slide

  38. CDNs TODAY
    Global audience
    Fingerprinting
    Caching

    View full-size slide

  39. PaaS TODAY
    Heroku, Zeit - JS app
    Surge, Netlify, Github - UI-only
    AWS, Azure, Google - Infinity

    View full-size slide

  40. READ TODAY
    Docs
    Integrations
    Utilize ecosystem, services

    View full-size slide

  41. Algorithms TODAY
    More data
    More code
    More logic
    Not just visuals

    View full-size slide

  42. Think TODAY
    Lots of libs
    Still need to be a programmer

    View full-size slide

  43. GraphiCS TODAY
    SVG - d3
    Canvas
    WebGL - three.js

    View full-size slide

  44. Animation TODAY
    CSS - transitions, keyframes
    3rd-party - Greensock
    Web animation API

    View full-size slide

  45. Offline TODAY
    Progressive Web Apps (PWA)
    Service workers
    localStorage
    IndexedDB

    View full-size slide

  46. TODAY
    The Future

    View full-size slide

  47. Listen for TODAY
    Browser-native modules
    WebAssembly
    Web components

    View full-size slide

  48. Excitement for Tomorrow
    Lots to grow into
    Learned one thing at a time
    Stay determined
    Start with something

    View full-size slide

  49. NEXT STEPS Today
    Invent a project
    Volunteer for frontend work

    View full-size slide

  50. TODAY
    Thank you
    For
    coming
    here
    @JakeTrent

    View full-size slide