JAMStack + ProcessWire

[Tom.]

Hi All,

Recently I've been trying to improve my development skills with R&D projects. My skills are mostly with HTML, PHP and Javascript. I class myself as a front-end developer however I can build back-end applications.

I remember when Web 2.0 was realised and there was a shift in ideology and a design guideline to come along with it. But recently things are moving quicker than ever. I'm seeing a huge amount of people dropping jQuery in favour of ES6. But more than that, they are using framework's like React, Angular and Vue.

Recently I learnt about JAMStack, and idea that you use API's to generate a flat file website which you serve through an CDN and honestly, I'm feeling way out of my depth here. I really want to stay up to date, but it seems developing a website is like engineering an engine, once you get to the top end of "speed" making it go faster is 100x harder.

Don't get me wrong, I'm happy with the performance of ProcessWire, but these JAMStack websites are blazing. I guess you could call this Web 3.0 and it's all about speed and lightweight. Things like ASYNC and lot of other things that can come together to make a pleasurable experience even on the slowest of mobile networks.

Is all of this a fad or is it really the next big movement? Is that how we should be developing websites now, or are they just buzz-words? I do like the idea of the CMS generating flat files and routing that through a CDN, but also using Git to manage all the changes it seems very fluid. (https://www.netlify.com, https://github.com/netlify/netlify-cms).

I would love to learn all of this, but I feel like there is so much to catch up on I don't know where to start. Like, what is gulp? postCSS? I guess they are pre-processing like LESS to have all this power but still serve small files over the browser.

As you can probably tell, I'm overwhelmed by all these things and it doesn't stop, now the "next big thing" is Gatsby (https://www.gatsbyjs.org) and whatever happened to Node.js? 

I feel like I'm going crazy haha! 

My question is, how do you guys deal with all of this? Is it something that ProcessWire can be used with as ProcessWire uses a database and requires PHP. I recently read: 

 which touched upon these things, but I didn't understand it all. 

[clsource]

Hello,

maybe you could be interested in this post

Basically the JAMStack is just a Website with JS and a REST or GraphQL API.
Wich can be easily done with PW if you need to.

A JAMStack is not needed for every project though

[SamC]

I feel your pain @Tom.

Except I came at all this in a different way and learned HTML and CSS until I was blue in the face (then nodejs/gulp/SCSS/Less/postCSS) and now webpack (which I'm finding horrible).

Now however, after spending years ignoring JS/PHP (i.e. actual programming), my skills in that area are not good enough. I'm very lopsided towards CSS and the tools themselves. But now JS is so popular, I don't understand react/angular/vue or any of that stuff.

You're certainly not alone with the feeling of "too much to learn"!

[Jonathan Lahijani]

I went "crazy" quite a few times over all frontend churn as well, FOMO, etc.  At the end of the day, use the best tool for the job.

Right now, practically all of my needs are met with the following stack:

• ProcessWire
• UIkit3 (it's so good; but, but the horror of using UIkits classes in your HTML!)
• Some PW premium modules:
  • ListerPro
  • ProCache (it's become my build process tool; you can build UIkit3 with it perfectly fine; I'm dumping Node, Webpack, and whatever the "latest" way to do things is)
  • FormBuilder
• Pulling in whatever packages I need via composer
• VueJS if needed (loading it via CDN, oh my god the horror!)
• Digital Ocean for hosting (manually configuring their Ubuntu LAMP 16.04 droplet... takes only a few minutes)
  If your clients want to use some crappy shared host, switch them to DigitalOcean; it's practically the same price.

I develop all my sites on Windows (but technically it's Linux thanks to WSL).  No VMs, no Docker (again, the horror of what happens if my server ends up being PHP v7.0.23 and my local machine is 7.0.22!).  Simple and reliable 99.99999999999999% of the time.

I deploy with a simple shell script (horror! not using Capistrano, Ansible, whatever the latest tool is).

Sure, your site won't be able to handle all of earth's traffic if everyone were to visit your site at the same moment, but it'll be fine for 85.7% of the sites you most likely take on.

I've built very complex sites with just those tools and I move extremely rapidly while keeping the site client-maintainable!

Even if you became Mr. Expert on the latest frontend tools, it's going to change significantly by this time next year and the year after that.  Perhaps sit on the sidelines for a bit.

End rant.

[szabesz]

12 hours ago, Tom. said:

My question is, how do you guys deal with all of this?

Try ProCache and HTTP/2  

https://caniuse.com/#search=http2

[SamC]

I'm about to dump webpack in the bin after seeing this: https://parceljs.org/ ...it's just got ridiculous. Think I'll stick with my gulp setup for now, works fine. However, this interests me quite a bit:

13 hours ago, Jonathan Lahijani said:

ProCache (it's become my build process tool; you can build UIkit3 with it perfectly fine; I'm dumping Node, Webpack, and whatever the "latest" way to do things is)

I read:

https://processwire.com/blog/posts/pw-3.0.76-plus-login-register/#procache-3.1.7-adds-support-for-scss-and-less

So you can just import the uikit core into your own mystyles.less file:

@import "./uikit/src/less/uikit.theme.less";

// my custom styles
.hook-card() {
  background: red;
}

and supply mystyles.less to procache? How does this work on a local development (xampp/mamp/lamp)? If you change the source file, are the new changes compiled instantly? Sounds pretty awesome.

13 hours ago, Jonathan Lahijani said:

Digital Ocean for hosting (manually configuring their Ubuntu LAMP 16.04 droplet... takes only a few minutes)

How does it differ from 'normal' hosting where you get an already set up server with cpanel, phpmyadmin etc. Do you have to setup all this up yourself with digital ocean?

[elabx]

4 hours ago, SamC said:

How does it differ from 'normal' hosting where you get an already set up server with cpanel, phpmyadmin etc. Do you have to setup all this up yourself with digital ocean?

VPS services give you a blank linux machine where you have to configure Apache/MySQL/PHP. Sometimes they include panel tools to automate some tasks, I have only used Amazon EC2 which gives you nothing but the empty Linux machine.

I think small/medium clients who look for a "all-in-one" solution will prefer a 'normal' hosting. As it enables them instantly ftp accounts, mail accounts, etc. From what I've seen from @Jonathan Lahijani 's projects posted around here is that they are more resource demanding and complex from your average website, so a VPS feels like a perfect fit to achieve performance and simplicity/customization in the server setup. E.g. You need to install a particular php extension, need to use composer, etc. 

4 hours ago, SamC said:

and supply mystyles.less to procache? How does this work on a local development (xampp/mamp/lamp)? If you change the source file, are the new changes compiled instantly? Sounds pretty awesome.

Yes my friend! As beautiful as you depict it. I don't know the specifics but probably checks for changes in the file on it's own, rerenders and caches it. 

I hope the AdminUIkit had a way to be hooked on ProCache to leverage the in-server compiling.

[szabesz]

2 minutes ago, elabx said:

VPS services give you a blank linux machine where you have to configure Apache/MySQL/PHP.

And there are the so called "managed VPS" services where you get a preconfigured VPS, regular system updates, technical support and some other extras depending on the provider's actual offering.

[SamC]

7 minutes ago, elabx said:

Yes my friend! As beautiful as you depict it. I don't know the specifics but probably checks for changes in the file on it's own, rerenders and caches it. 

 No way! That's sounds insane. You mean I could throw out all the JS config gibberish and actually make some websites?  (and make a process module instead of sodding around with webpack which is teaching me absolutely nothing)

Saying that, haven't got the £££ for procache right now. Bah!

[elabx]

1 hour ago, SamC said:

Saying that, haven't got the £££ for procache right now. Bah!

ProCache is an awesome product with lots of features and Ryan's touch of mastership but for the less/sass compiling you can roll your own with the right PHP libraries, did it once myself with https://github.com/oyejorge/less.php 

1 hour ago, szabesz said:

And there are the so called "managed VPS" services where you get a preconfigured VPS, regular system updates, technical support and some other extras depending on the provider's actual offering.

Yes indeed! Actually working a lot on one a lot provided by LiquidWeb. 

[SamC]

My current solution involves:

package.json

{
  "name": "myapp",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Sam",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.0.0-beta.34",
    "@babel/preset-env": "^7.0.0-beta.34",
    "babel-loader": "^8.0.0-beta.0",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.2",
    "less": "^2.7.3",
    "less-loader": "^4.0.5",
    "style-loader": "^0.19.0",
    "uikit": "^3.0.0-beta.35",
    "webpack": "^3.10.0"
  }
}

webpack.config.js

const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

const extractLess = new ExtractTextPlugin({
    filename: "myapp.css"
});

const config = {
  entry: "./src/js/app.js",

  output: {
    path: path.resolve(__dirname, "dist/"),
    filename: "js/bundle.js"
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },

      {
        test: /\.less$/,
        use: ExtractTextPlugin.extract({
          use: ['css-loader', 'less-loader'],
          fallback: 'style-loader'
        })
      }
    ]
  },

  plugins: [
    new ExtractTextPlugin({
      filename: "css/myapp.css",
      disable: false,
      allChunks: true
    })
  ]
};

module.exports = config;

app.js

// pull in uikit Less from custom file
require("../less/myapp.less");

// get uikit JS
import UIkit from "uikit";
import Icons from "uikit/dist/js/uikit-icons";

// loads the Icon plugin
UIkit.use(Icons);

// call a uikit component
UIkit.notification("Holy cow, it works!")

// test babel is working
const name = "Sam";

myapp.less

@import "~uikit/src/less/uikit.theme.less";

// do custom stuff below here
.hook-card() {
  // stuff
}

Ok, granted, it does output '/dist/css/myapp.css' and '/dist/css/bundle.js', both with uikit 3 (JS and CSS) included properly.

Gonna get procache when I have the cash to maybe save my sanity if it's not too late 

Although, on a positive note, if anyone asks on here how to include uikit with npm and webpack 3, they could give this a go.

[Mikie]

Hey @Tom.

JAMstack itself is just a marketing term created by Netlify’s CEO to onboard people onto their hosting platform and CMS. Netlify CMS is not really a CMS, it is an admin panel that integrates with static site generators like Hugo and Jekyll. The use case for static site generators is usually very simple sites with basic structured content like blogs and portfolios. See examples here https://jamstack.org/examples/

The JAMstack methodology also encourages using cloud CMS platforms like Contentful, however there are benefits and drawbacks to this I won't go into. To set up something like what you are asking about (but way more fun and flexible) with Processwire, imagine you have a domain http://api.website.com pointed to a Processwire instance with a homepage template like this:

<?php namespace ProcessWire;

header('HTTP/1.1 200');
header('Content-Type: application/json,charset=utf-8');
header("access-control-allow-origin: *");

$data = [];
$projects = $pages->find("template=project");

foreach ($projects as $p) {
    $data[] = [
        $title -> $p->title;
        $content -> $p->sometextareafield;
    ]
}

echo json_encode($data);

and the main domain http://website.com is just a static hosted at netlify and your index.html contains the below:

<body>
    <div id="projects"></div>
    <script type="text/javascript">
    $(document).ready(function() {
        $.ajax({url: "http://api.website.com"}).done(function(data) {
            var $projects = $('#projects');
            data.forEach(function(project) {
                var html =
                    "<div class='project'>" +
                    "<h2>" + project.title + "</h2>" +
                    project.content +
                    "</div>";
                $projects.append(html);
            });
        });
    });
    </script>
</body>

... then you have the beginnings of a single page javascript app. Of course building an entire site like this and incorporating routing and state management etc would become tiresome very quickly in jQuery, which is why javascript frameworks like React and Vue exist. 

Regarding build tools and task runners like Webpack and Gulp, they exist to do what they say, i.e. bundle up static assets or run tasks. Before getting to that tho, it is important to understand the way people use node and npm for front end dev. See this article maybe: https://www.impressivewebs.com/npm-for-beginners-a-guide-for-front-end-developers/

I personally hate Webpack, I use npm scripts and the CLIs of my preferred libraries to do everything. I can post an example if you like, but these blog posts sum it up: https://deliciousbrains.com/npm-build-script/ https://www.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/

Edited November 20, 2018 by mke
Fix some code