The ALL-POWERFUL FRONT-END Developer

Front-End Developers

WE GET TO WORK ON THE THING.

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

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

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.

You can make an awesome lifelong career out of this.

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

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

“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. !

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.

the power of serverless .info

Let's look at one of the major ingredients.

Cloud Functions aka " Functions as a Service " URLs!

WHY? Reasons.

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.

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

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.

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

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.

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

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

URLs! Twilio Recipe Website

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

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

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.

So let's do some SERVERLESS

action!

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

A JavaScript function

I can run it and see what I get.

<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.

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); }); });

UGGGGHGKH THIS IS COMPLICATED. "

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

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.

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 .

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

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.

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

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

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

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

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

that go along with it.

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

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

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?

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

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

REAL LIFE EXAMPLE of Cloud Functions

Less PostCSS Markdown Pug Babel Stylus Sass Slim Haml Preprocessor Router

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

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

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

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

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

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

@kitt

YOUR SITE NEEDS TO SEND NOTIFICATIONS Like modern websites do .

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!

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

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

These are essentially APIs for sending emails

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?

Let's look at our little baby infrastructure.

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

Open source abstraction!

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

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

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

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

But let's look at other solutions. SERVERLESS

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

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.

A newer version of that by Lea Verou.

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

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

SERVERLESS We'd be " er wrap this up.

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

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

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

SERVERLESS You can have any sort of content

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

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?

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

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.

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