Getting into Frontend Dev Today

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-speciﬁc

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 preﬁxes -- 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 Polyﬁlls - 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 - Inﬁnity

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