Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
GETTING INTO FRONTend DEV Jake Trent
Slide 2
Slide 2 text
WHY TODAY Exciting Satisfying Develop self Market need
Slide 3
Slide 3 text
PREREQs TODAY Interest Commitment Don’t need to be an artist
Slide 4
Slide 4 text
Purpose TODAY Feed interest Today’s environment Radar First steps
Slide 5
Slide 5 text
SPECTRUM TODAY Dabble - a few toys Aware - in a pinch Focus - invest career
Slide 6
Slide 6 text
Disclaimers TODAY Hot takes Exposed to Many paths
Slide 7
Slide 7 text
FRONTEND JOBS TODAY Marketing Biz app dev Web game dev
Slide 8
Slide 8 text
CORE TODAY Design HTML CSS JS
Slide 9
Slide 9 text
TODAY HTML
Slide 10
Slide 10 text
Renderable TODAY All browser-native Flash is dead Hierarchy Semantics
Slide 11
Slide 11 text
Templates TODAY Web Components JSX Library-specific
Slide 12
Slide 12 text
Accessibility TODAY Sight-impaired Motion-impaired Touch-enabled
Slide 13
Slide 13 text
TODAY CSS
Slide 14
Slide 14 text
CSS TODAY CSS3 Cross-browser ++ Browser prefixes -- Better layouts
Slide 15
Slide 15 text
Layout TODAY Flexbox CSS Grid Sameness
Slide 16
Slide 16 text
BROWSERS TODAY Evergreen Speed, capability++ Mobile
Slide 17
Slide 17 text
Viewports TODAY From anywhere Responsive web design
Slide 18
Slide 18 text
TODAY JS
Slide 19
Slide 19 text
Movement TODAY Language change Progressive community Browsers keeping pace
Slide 20
Slide 20 text
JS Evolution TODAY Ecma TC39 committee Active! Stages
Slide 21
Slide 21 text
JS Tooling TODAY Node-based Bundlers Compilers Task runners --
Slide 22
Slide 22 text
Analysis Tooling TODAY eslint prettier
Slide 23
Slide 23 text
Modules TODAY ES6 CommonJS Abstractions Design
Slide 24
Slide 24 text
Compilation TODAY Traceur - 1st Babel - today Addicted
Slide 25
Slide 25 text
Helping Browsers TODAY Polyfills - core-js Transpile - babel
Slide 26
Slide 26 text
New Languages TODAY Typescript Elm ReasonML …
Slide 27
Slide 27 text
TYPES IN JS TODAY Static typing Flowtype Typescript Tooling
Slide 28
Slide 28 text
CSS-IN-JS TODAY Glamor Styled-components Aphrodite Componentization
Slide 29
Slide 29 text
FRAMEWORKS TODAY React Angular Vue …
Slide 30
Slide 30 text
Testing TODAY Jest Unit Functional/browser Snapshot
Slide 31
Slide 31 text
TODAY Environment
Slide 32
Slide 32 text
Editors TODAY Editor - VSCode IDE - Webstorm RSI/PTSD - Vim Textpad/nano
Slide 33
Slide 33 text
Source Control TODAY Git Dropbox -- FTP --
Slide 34
Slide 34 text
Your Team TODAY Integrated Not alone, slicing -- Some specialized
Slide 35
Slide 35 text
Project Size TODAY Larger codebase More in client More programmers Architecture and patterns
Slide 36
Slide 36 text
SPA DAY Single-page apps Long-term state Routing Render Logic
Slide 37
Slide 37 text
Server Rendering TODAY “Isomorphic”/“Universal” Performance SEO
Slide 38
Slide 38 text
APIS TODAY REST - JSONAPI.org GraphQL - relay/apollo Websockets - socket.io
Slide 39
Slide 39 text
TODAY Deployment
Slide 40
Slide 40 text
Publishing TODAY npm Versioning - Semver.org Dependency management
Slide 41
Slide 41 text
CDNs TODAY Global audience Fingerprinting Caching
Slide 42
Slide 42 text
PaaS TODAY Heroku, Zeit - JS app Surge, Netlify, Github - UI-only AWS, Azure, Google - Infinity
Slide 43
Slide 43 text
TODAY Work
Slide 44
Slide 44 text
READ TODAY Docs Integrations Utilize ecosystem, services
Slide 45
Slide 45 text
Algorithms TODAY More data More code More logic Not just visuals
Slide 46
Slide 46 text
Think TODAY Lots of libs Still need to be a programmer
Slide 47
Slide 47 text
GraphiCS TODAY SVG - d3 Canvas WebGL - three.js
Slide 48
Slide 48 text
Animation TODAY CSS - transitions, keyframes 3rd-party - Greensock Web animation API
Slide 49
Slide 49 text
Offline TODAY Progressive Web Apps (PWA) Service workers localStorage IndexedDB
Slide 50
Slide 50 text
TODAY The Future
Slide 51
Slide 51 text
Listen for TODAY Browser-native modules WebAssembly Web components
Slide 52
Slide 52 text
Excitement for Tomorrow Lots to grow into Learned one thing at a time Stay determined Start with something
Slide 53
Slide 53 text
NEXT STEPS Today Invent a project Volunteer for frontend work
Slide 54
Slide 54 text
TODAY Thank you For coming here @JakeTrent