Update source file en.md
skip-build
This commit is contained in:
Joost De Cock
parent
eedd323233
commit
e61cb1b19e
1 changed files with 106 additions and 0 deletions
106
markdown/org/blog/freesewing-goes-jamstack/en.md
Normal file
106
markdown/org/blog/freesewing-goes-jamstack/en.md
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
---
|
||||
author: "joostdecock"
|
||||
caption: "Picture by <a href='https://stock.tookapic.com/jenniferforjoy' target='_BLANK' rel='nofollow'>Jennifer</a>"
|
||||
date: "2017-06-12"
|
||||
image: "https://cdn.sanity.io/images/hl5bw8cj/site-content/952f714d11203d03a449895053c63963b0c02dbd-2000x1126.jpg"
|
||||
intro: "When we released freesewing core at the end of March, my focus immeadiatly shifted to building our front-end so that freesewing.org could fully replace makemypattern.com ."
|
||||
title: "We're JAMstack, we're JAMstack, we're JAMstack, we're JAMstack, we're JAMstack, we're JAMstack, we're JAMstack, and I hope you like JAMstack too"
|
||||
---
|
||||
|
||||
When we released freesewing core at the end of March, my focus immeadiatly shifted to building our front-end so that [freesewing.org](/) could fully replace [makemypattern.com](https://makemypattern.com/).
|
||||
|
||||
I believe that the value of freesewing lies with the core platform and our patterns.
|
||||
But without a user friendly way to expose that value, it will largely go ignored.
|
||||
|
||||
So we needed a website that lets people generate patterns. Makemypattern.com — arguably the best comparison of something similar — runs on Drupal 7, and my initial idea was to run the new site on Drupal 8.
|
||||
I went down that path far enought to be confident I could get it to work, and hook it up to our backend. At which point I switched gears and turned my attention to what is now known as freesewing core.
|
||||
|
||||
Core took about 7 months to build, and a lot has changed since then. Or perhaps I have changed, I certainly learned a lot along the way. Either way, I've decided to do things different.
|
||||
|
||||
## The problem with a CMS
|
||||
|
||||
I have no beef with Drupal but the idea of managing the freesewing website through any Content Management System (CMS) does not appeal to me.
|
||||
|
||||
One of the main reason is that so much information is stored under an opaque database layer which makes it difficult to manage.
|
||||
That goes for content where posts, metadata, images, and so on is all spread across tables, locations, and folders.
|
||||
But there's also the theme that has a bunch of stuff in it, there's the custom Drupal modules to connect to the backend, and so on and so forth.
|
||||
|
||||
> I wanted that same approach in a website. Except, it can't be static because it has to, you know, do stuff.
|
||||
|
||||
When we were finalizing core, I built a documentation site for it based on [Jekyll](https://jekyllrb.com/). It felt like a breath of fresh air in comparison.
|
||||
Just a bunch of markdown files, with some SASS, images, and some JavaScript thrown in the mix, and it all compiles into a neat static website.
|
||||
|
||||
It's easy to manage, and it integrates nicely with a GitHub-centered workflow that is going to be famliar to potential contributors.
|
||||
|
||||
I wanted that same approach in a website. Except, it can't be static because it has to, you know, do stuff.
|
||||
|
||||
|
||||
## An alternative approach: JAMstack
|
||||
|
||||
I first learned about JAMstack when I started looking into hosting for said core documentation site.
|
||||
It was initially hosted on GitHub pages which provides free hosting.
|
||||
They also have SSL or a custom domain name, but you can't have both. Which was kind of a deal breaker.
|
||||
|
||||
Looking for alternatives, I stumbled onto [Netlify](https://www.netlify.com/), who do both SSL and custom domains and have a free-tier for open source projects (thanks guys).
|
||||
Furthermore, [this video by Netlify CEO Mathias Biilmann](https://vimeo.com/163522126) got me really excited about JAMstack.
|
||||
|
||||
Unless you're familiar with JAMstack, I suggest you check out the video, but it boils down to this:
|
||||
|
||||
- **J** = JavaScript
|
||||
- **A** = APIs
|
||||
- **M** = Markup
|
||||
|
||||
The idea is that you build your static site (markup) that you then make interactive with JavaScript that hooks up to one or more APIs.
|
||||
|
||||
So in our case, rather than having a straight-forward documentation site with easy-to-edit markdown and a complex CMS to handle the dymanic stuff, let's just build one simple site that is statically generated, yet uses JavaScript and APIs to do the smart stuff.
|
||||
|
||||
## Running before you can walk
|
||||
|
||||
I must admit that in my enthousiasm to embrace this new approach I got a little ahead of myself.
|
||||
Suddenly, I was no longer building a simple site, but I was up to my eyeballs in isomorphic rendering, client-side routing, React and Redux, Node.js and ES6 transpiling.
|
||||
|
||||
> If you don't know what any of that means, you might get a hint of the frustration I felt as I was trying to tame all these new beasts.
|
||||
>
|
||||
> If you do know what it all means, where were you back in April when I walked through the valley of the React of death?
|
||||
|
||||
Point is, I'm not a developer and I was in way over my head.
|
||||
While I was learning new things every day, I wasn't making much progress on the actual task at hand, and felt frustrated with my inability to do even the most mundane things.
|
||||
|
||||
After a month of frustration, loads of trial and seemingly even more error, I threw in the towel.
|
||||
Eff this newfangled shiny JavaScript all the young kids are using, I'll stick to what I know.
|
||||
|
||||
Which is essentially the basics of jQuery. In other words, stuff that was pretty cool 10 years ago.
|
||||
|
||||
## 10 year old jam is still jam right?
|
||||
|
||||
So here we are, freesewing.org is a site powered by the JAMstack. And you know what, it seems to do what it needs to do.
|
||||
|
||||
We have Jekyll build out static site, and when we push to our master branch, it gets autmatically deployed to Netlify.
|
||||
|
||||
> Eff this newfangled shiny JavaScript all the young kids are using
|
||||
|
||||
We have [a brand new data API](https://github.com/freesewing/data) build on [the Slim framework](https://www.slimframework.com/).
|
||||
It handles all user data. Things like accounts, measurements, models, and drafts, but also comments on this website and so on.
|
||||
|
||||
It also talks to core for us, and every time you draft a pattern, we don't just give you the pattern, but we also run a comparison of your pattern to a range of standard sizes, which is kinda cool.
|
||||
|
||||
And we have other cool stuff, like the ability to fork or redraft an existing draft.
|
||||
|
||||
## This is a starting point
|
||||
|
||||
I hope the user experience/interface is not going to be a roadblock for people.
|
||||
I've made a great deal of effort to make the drafting process as intuitive as possible and I think that in comparison to our demo (or the makemypattern interface for that matter) it's a vast improvement.
|
||||
|
||||
Then again, I'm sure things will break left or right, or that some of you don't like the colours or whatnot.
|
||||
|
||||
The point is that I set out to build something that can replace makemypattern.com so that I could tell all of you _Hey, come over and play with this new thing_.
|
||||
|
||||
I think if nothing else, I can do that now. And if you see room for improvement, please [join the effort](/contribute), we're only getting started.
|
||||
|
||||
|
||||
|
||||
<small>PS: For those of you wondering about the title of this post:</small>
|
||||
|
||||
<YouTube id='oFRbZJXjWIA' />
|
||||
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue