The All-Powerful Front-End Developer

A presentation at Uhm just me hanging out in my booth. in June 2018 in by Chris Coyier

Slide 1

Slide 1

The ALL-POWERFUL FRONT-END Developer

Slide 2

Slide 2

Front-End Developers

WE GET TO WORK ON THE THING.

Slide 3

Slide 3

Owners Managers Design &
UX Accounting Finance Back End DevOps These people are all super important. But they don't work directly on the thing.

Slide 4

Slide 4

Slide 5

Slide 5

Slide 6

Slide 6

Without any of the stuff we're going to talk about today, FED’s are already very powerful.

Slide 7

Slide 7

Without any of the stuff we're going to talk about today, ๏ UX is in our hands! ๏ Performance is in our hands! ๏ Accessibility is in our hands! ๏ Execution of the design, animation, and interaction is in our hands! FED’s are already very powerful.

Slide 8

Slide 8

You can make an awesome lifelong career out of this.

Slide 9

Slide 9

HTML CSS JS The FRONT END DEVELOPER SKILLSET only starts being LIMITED when you need custom back end development and server ops.

Slide 10

Slide 10

But that is getting less and less true with new tech
SERVERLESS

Slide 11

Slide 11

“Serverless” doesn't mean there aren't servers involved. ! ere will always be servers involved. ! at's what the internet is. ! PUBLIC SERVICE ANNOUNCEMENT: THIS CAVEAT IS REQUIRED TO BE INCLUDED ANYTIME ANYONE SAYS SERVERLESS FOR THE NEXT TWO YEARS. !

Slide 12

Slide 12

Slide 13

Slide 13

We're totally gonna talk about serverless

today. Let's not try to define it right now because it's hard and that's boring . Instead, know that everything we talk about today combined is basically serverless.

Slide 14

Slide 14

the power of serverless .info

Slide 15

Slide 15

Let's look at one of the major ingredients.

Slide 16

Slide 16

Cloud Functions aka " Functions as a Service " URLs!

Slide 17

Slide 17

WHY? Reasons.

Slide 18

Slide 18

Use case for Cloud Functions SAY YOUR THING NEEDS TO SEND A TEXT MESSAGE. Say it's a recipe site and sending a text is a quick way to share a recipe with a friend or yourself for quick access.

Slide 19

Slide 19

Slide 20

Slide 20

Welp. That's where my front end skills stop and someone else's back end skills will need to come in.

Slide 21

Slide 21

The reason we can do this ourselves isn't because Twilio has a client-side- only

JavaScript API. They don't. This is a common theme when integrating with other services, we need to protect our API keys. You can't protect your API keys with entirely client-side applications. Sometimes that doesn't matter. Sometimes it does.

Slide 22

Slide 22

Some API's don't need keys, or the keys don't need protection.

Slide 23

Slide 23

When your API key unlocks the ability to send an SMS message, it matters. Bad guys would love to steal that API key to use for evil.

Slide 24

Slide 24

We need a server to make this work. Cloud Function with a URL

Slide 25

Slide 25

This is what we're not going to do. Not because this is bad , but because we're looking at serverless options on purpose .

Slide 26

Slide 26

URLs! Twilio Recipe Website

Slide 27

Slide 27

WAIT A SECOND! Isn't our recipe site already running on a server ? Why can't we just use that?

Slide 28

Slide 28

We maybe could. But it's increasingly popular to use a static file host .
And a damn fine idea!

Slide 29

Slide 29

Slide 30

Slide 30

Why? • Very inexpensive (or free) • Very fast (CDN) • Very secure • Very front-end developer friendly • HTTPS, Git, Modern Build Process Wonderful at hosting static files. Don't run any backend languages. On purpose.

Slide 31

Slide 31

So let's do some SERVERLESS

action!

Slide 32

Slide 32

Webtask is kinda like CodePen, but for cloud functions and minor data storage.

Slide 33

Slide 33

A JavaScript function

Slide 34

Slide 34

I can run it and see what I get.

Slide 35

Slide 35

Slide 36

Slide 36

Slide 37

Slide 37

Slide 38

Slide 38

Slide 39

Slide 39

Slide 40

Slide 40

Slide 41

Slide 41

<form method=" POST " action="https://wt-8081b26e05bb4354f7d65ffc34cbbd67-0.run.webtask.io/twilio"> <label for="tel">Number to SMS to:<label> <input type="tel" name="tel" id="tel"> <input type="hidden" name="message" value="Whatup." > <input type="submit"> </form> Just HTML! You'd probably call this progressive enhancement.

Slide 42

Slide 42

Slide 43

Slide 43

JavaScript! Probably a bit more realistic/practical, not that you shouldn't start with the baseline HTML functionality. Progressive enhancement! form.addEventListener("submit", function(e) { e.preventDefault();

axios . post (cloudless_function_url, { message: document.querySelector ("#message").textContent , to_number: document.querySelector ("#to_number").value

}) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); });

Slide 44

Slide 44

Slide 45

Slide 45

UGGGGHGKH THIS IS COMPLICATED. "

Slide 46

Slide 46

LIKE ANYTHING COMPUTERS,
SOME THINGS ARE AND SOME THINGS AREN'T.

Slide 47

Slide 47

Some problems are easier to solve SAY YOUR THING NEEDS A DANG WEB FORM. Like you need to ask some users to register for an event.

Slide 48

Slide 48

Do we need to build a cloud function and deal with API keys and all that stuff? No, because this is one of the oldest website needs in the book. HTML, CSS, and JavaScript can build and submit a web form, but it doesn't do anything without a server to process it .

Slide 49

Slide 49

Slide 50

Slide 50

Slide 51

Slide 51

Slide 52

Slide 52

Slide 53

Slide 53

Dolladollabillz SAY YOU NEED TO TAKE MONEY FOR SOMETHING. You want to sell custom scarves, tickets to an event, or your time.

Slide 54

Slide 54

Slide 55

Slide 55

Slide 56

Slide 56

Slide 57

Slide 57

Slide 58

Slide 58

Slide 59

Slide 59

Slide 60

Slide 60

Slide 61

Slide 61

Stripe even gives you a nice on-page checkout experience for free. Still needs to talk to a backend thing. Like, say, a cloud function.

Slide 62

Slide 62

Speaking of which, browsers are stepping up their game here as well. The Web Payment API is essentially free check out UI/UX.

Slide 63

Slide 63

Speaking of which, browsers are stepping up their game here as well. The Web Payment API is essentially free check out UI/UX.

Slide 64

Slide 64

The Situation Room SAY YOU NEED COMMENT THREADS. Paragraphs are the ultimate currency of the internet.

Slide 65

Slide 65

Slide 66

Slide 66

But a traditional WordPress site with a MySQL database doesn't lend it self particularly well to this whole Serverless thing.

Slide 67

Slide 67

We talked about static site hosting... There is a whole world of STATIC SITE BUILDERS

that go along with it.

Slide 68

Slide 68

Slide 69

Slide 69

A bunch of Markdown files for content Some templates + Makes a website

Slide 70

Slide 70

Some templates + Makes a website

All this stuff lives in a Git repo. 100% of your website is in a repo. A bunch of Markdown files for content

Slide 71

Slide 71

But traditional databases don't go inside repos, so how are we gonna handle comments (and the structured data) if we go down this road?

Slide 72

Slide 72

Slide 73

Slide 73

Slide 74

Slide 74

Slide 75

Slide 75

Slide 76

Slide 76

AWS Lambda is a cloud function service , just like we looked at with Webtask and Azure cloud functions. Lambda is probably the biggest player .

Slide 77

Slide 77

Here's a wildly extravagant with a serverless workf l ow for comments. Part of the build process is reaching out to Firebase to pull in approved comments. Triggering build processes is easy and cheap on Netlify. Say we want to roll our own system

Slide 78

Slide 78

Slide 79

Slide 79

REAL LIFE EXAMPLE of Cloud Functions

Slide 80

Slide 80

Slide 81

Slide 81

Less PostCSS Markdown Pug Babel Stylus Sass Slim Haml Preprocessor Router

Slide 82

Slide 82

Less PostCSS Markdown Pug Babel Stylus Sass Slim Haml Cheaper! Easier! Faster! Don't break!

Slide 83

Slide 83

SAY YOU NEED TO BUILD A SIMPLE (BUT CUSTOM) CRM. We're not re-building Salesforce or Batchbook here. Just a spreadsheet with a web app. The boss needs it

Slide 84

Slide 84

Slide 85

Slide 85

Slide 86

Slide 86

The real situation is you need a CRUD app. You need to store a little data, look at it, and be able to change it. C REATE R EAD U PDATE D ELETE

Slide 87

Slide 87

Slide 88

Slide 88

Airtable has very powerful and modern spreadsheets and forms. And great CRUD APIs!

Slide 89

Slide 89

USE CASE "We all speak a lot, as it's part of a developer advocate's job, and we're also frequently asked where we'll be speaking. For the most part, we each manage our own sites where we list all of this speaking, but that's not a very good experience for people trying to explore, so I made a demo that makes it easy to see who's speaking, at which conferences, when, with links to all of this information." Sarah Drasner

Slide 90

Slide 90

Slide 91

Slide 91

Store the data from here as JSON CRUD functions Display the data

Slide 92

Slide 92

@kitt

Slide 93

Slide 93

Slide 94

Slide 94

Slide 95

Slide 95

YOUR SITE NEEDS TO SEND NOTIFICATIONS Like modern websites do .

Slide 96

Slide 96

Slide 97

Slide 97

Say it's a bug tracker application. When a bug happens, it should trigger a Slack notification, email, and SMS. Bug happens! Send Slack notice! Send 
 email! Send 
 SMS!

Slide 98

Slide 98

As a front-end developer, not only can you design that experience, but you can make it work.

Slide 99

Slide 99

! ey make use of normal HTTP requests (Ajax) with a JSON payload that includes the message text and some options. Webhook = URL

Slide 100

Slide 100

These are essentially APIs for sending emails

Slide 101

Slide 101

These are jobs for cloud functions! Webtask Azure Cloud Functions Firebase or Google Cloud Functions AWS Lambda Hitting APIs with secret keys? Hitting webhooks with JSON?

Slide 102

Slide 102

Slide 103

Slide 103

Let's look at our little baby infrastructure.

Slide 104

Slide 104

Your Thing! Sparkpost Twilio Serverless Cloud Function Serverless Cloud Function Serverless Cloud Function Slack

Slide 105

Slide 105

Open source abstraction!

Slide 106

Slide 106

Mailer Your Thing! Twilio Serverless Cloud Function Serverless Cloud Function Serverless Cloud Function Slack Sparkpost (or whatev)

Slide 107

Slide 107

Serverless Cloud Function Serverless Cloud Function Serverless Cloud Function Serverless Cloud Function Twilio Slack Hey we've become architects!! Your Thing! Sparkpost (or whatev)

Slide 108

Slide 108

THERE NEEDS TO BE A WAY FOR NON-CODERS TO UPDATE THIS WEBSITE. Like some kind of "Content" "Management" "System". Let's say CMS for short. One reason you might reach for a "traditional" server

Slide 109

Slide 109

Using a "traditional" CMS like WordPress, CraftCMS, or Perch is a classic solution to this.

Slide 110

Slide 110

But let's look at other solutions. SERVERLESS

Slide 111

Slide 111

There is another whole class of CMSs called Static Site generators. They fit very nicely into the serverless movement. Cool way to think about it: your repo is your CMS

Slide 112

Slide 112

Static site generators tend to edge a bit too nerdy . Everyone can learn, but you gotta admit learning Markdown and text editors and Git and all that is a bit much to change a phone number.

Slide 113

Slide 113

Slide 114

Slide 114

A newer version of that by Lea Verou.

Slide 115

Slide 115

Slide 116

Slide 116

"Headless CMS" A CMS that has no front end at all. It just exposes content via API.

Slide 117

Slide 117

Slide 118

Slide 118

Cloud-Managed Headless CMSs Gives people a CMS with a UI, but delivers content via API so you can work with serverlessly.

Slide 119

Slide 119

SERVERLESS We'd be " er wrap this up.

Slide 120

Slide 120

SERVERLESS Static hosting Cloud functions Cloud storage Search service It's not all in. It's a f l exible ingredients list. Media storage Form processing Auth services Payment processing Headless CMSs Realtime

Slide 121

Slide 121

SERVERLESS You can build any size of website Small & Simple Large & Complex

Slide 122

Slide 122

SERVERLESS You can build any kind of website Blog Chat Mobile Dating App Forums Newspaper Social Media University Stock Tracker Dashboard

Slide 123

Slide 123

SERVERLESS You can have any sort of content

Slide 124

Slide 124

SERVERLESS ! ere are speed benefits Your own servers:

that's on you. 80% of performance is front-end concerns. 20% back-end Serverless:

companies are incentives to be fast and reliable

Slide 125

Slide 125

SERVERLESS ! ere are security benefits How do I protect and back up my database? What file permissions should PHP files be again? Where do I keep my secrets? What are breach points I should be extra careful about? Why is this my job?

Slide 126

Slide 126

https://codepen.io/sdras/pen/gojoYb

Slide 127

Slide 127

Slide 128

Slide 128

Slide 129

Slide 129

Serverless isn't 100% better all the time for everything. If you don't like it or it isn't right for, no big deal. Knowing about things is pretty valuable.

Slide 130

Slide 130

Slide 131

Slide 131

ALL-POWERFUL ALL-POWERFUL ALL-POWERFUL ! e ALL-POWERFUL FRONT-END Developer @ chriscoyier @ codepen