❥ Sponsor
First, quickly: AWS Amplify has a new Admin UI. Amplify always had a CLI that helps you build projects by setting up stuff like auth, storage, and APIs. That’s super useful, but now, you can do those things with the new Admin UI. And more, like model your data (!!), right from a local UI. That’s great for people like… me (I like my GUIs).
Now, slower.
Let’s start with the idea of Jamstack. Static Hosting + Services, right? Amplify is that: static hosting is part of the offering. You connect an Amplify project with a Git repo (you don’t have to, you could upload a zip, but let’s be real here). When you push to the designated branch on that repo (probably main or master), it deploys. That’s part of the magic of development today that we all know and love expect.
Static hosting might be all you need. Done.
But a lot of sites need more. Maybe your site is client-side rendered (for some of it), so the JavaScript hits an API for data and then renders. What data? What API? AWS has these things for you. For us front-enders, that’s probably AWS AppSync, which is like real-time GraphQL (cool). How do you set that up? Well, you can do it in the CLI, but it’s now way easier with the Amplify Admin UI.
Say you’re building a blog structure. Blogs have Posts, Posts have Comments. And so:
I’ll tell ya, coming from a WordPress upbringing and identifying mostly as a front-end developer, this feels doable to me. It’s not far from using Advanced Custom Fields in WordPress to model some data for a Custom Post Type. No wonder the line is so gray between front-end and back-end development.
Now that the Amplify Admin UI has this data modeled out, I can yank it down into my project and the whole schema is mocked out.
I’m bullish on GraphQL, but I can tell ya, all the setup of it is generally over my head. I’m generally very happy just being a consumer of a GraphQL API that is already set up, or doing minor tweaks. This, though, feels doable for me. The visual builder and the freebie scaffolding of the schema… yes please.
At this point then you have this project you can test and deploy. Once it’s deployed, there is a real data store in the cloud ready for data. How do you use it? It’s CRUD time! Create, Replicate, Update, and Delete, the core tenants of all good websites, right? Well, It’s Just JavaScript™. Here’s how you create a new blog, then a post in that blog:
That all works because the database exists and our app knows all about the data model. But what is DataStore in AWS Amplify? That’s yet another thing that AWS Amplify helps with. They have libraries to make all this easier. You don’t have to manually write fetch calls and do error handling and all that… Amplify libraries make life easier with all sorts of helpers (like you see above).
With all that setup, this slide I saw in their developer preview I got a peak at should make sense
Back to the Jamstack thing… now we’ve got Static Hosting going and we can deploy our website to it. By the way, that can be anything. A vanilla HTML/CSS/JavaScript thing. A React, Vue, or Angular app. Native apps too. Amplify doesn’t care, it just helps with the deployment and services.
Here’s a look at the Admin UI, where you can see the navigation with all the services you can set up, deployment activity, the ability to model (and edit) data, etc.:
What else is in there? With auth for one. If you’re storing data and managing it with API’s, it’s highly likely you’ll be dealing with authentication as well. Amplify has you covered. Need some to run some code server-side? You’ve got your functions right in there of course. Lambdas (serverless functions) are AWS bread and butter. Analytics? You bet.
Another thing you’ll surely be interested in is the different development stories. Like what is local development like? Well, it’s super good. Guess what?! Those screenshots above of the Admin UI… those aren’t some online dashboard in the AWS console, those are locally hosted on your own site. All this data modeling and storage and editing and such happens locally. Then you can push to live to any environment. Production, of course, but also whatever sort of staging environments you need.
When you need production data pulled down locally, you just… do that (with a command given to you right in the Admin UI).
You can join the Amplify team to find out more – they’ll be demoing on Twitch with Q&A this week:
Thursday, Dec. 3rd at 10-11am PST/ 7pm GMT
Friday, Dec. 4th at 1-3pm PST / 9pm GMT
www.twitch.tv/aws
I’m thinking this new Admin UI world is going to open up AWS Amplify to a lot more people. Having a UI to manage your site just feels better. For someone like me, it gives me a more complete understanding of what is going on with the backend and services, and more control over things. And yet, give me total freedom on the front end to do what I want to do, and also handle so many of the things I don’t (deployment, SSL, etc.) 👏
Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack.
You may write comments in Markdown thanks to Jetpack Markdown. This is the best way to post any code, inline like `<div>this</div>` or multiline blocks within triple backtick fences (“`) with double new lines before and after. All comments are held for moderation. Be helpful and kind and yours will be published no problem.
CSS-Tricks* is created, written by, and maintained by Chris Coyier and a team of swell people. The tech stack for this site is fairly boring. That’s a good thing! I’ve used WordPress since day one all the way up to v17, a decision I’m very happy with. I also leverage Jetpack for extra functionality and Local for local development.
*May or may not contain any actual “CSS” or “Tricks”.
CodePen is a place to experiment, debug, and show off your HTML, CSS, and JavaScript creations.
CSS-Tricks is hosted by Flywheel, the best WordPress hosting in the business, with a local development tool to match.
ShopTalk is a podcast all about front-end web design and development.