Front-end
Development

in WordPress
gangbaar maken

Door Gaya Kessler / @GayaNinja

Gaya Kessler

Senior Lead Front End Web Developer Manager Ninja Software Engineer Recruiter Specialist

bij Radish Concepts

Site: http://gaya.ninja

Blog: http://www.gayadesign.com

Twitter: @GayaNinja

WordPress is
niet aardig

voor frontenders

(die Gaya Kessler heten)

In deze presentatie:

• Wat is er mis met WordPress?
  
  
• Wat er moet veranderen
  
  
• Hoe doe je er iets aan?
  
  

Too long; Didn't listen:

Frontenden voor WordPress zonder WordPress is mogelijk.

1. Wat is er mis met WordPress?

Op front-end gebied

Web Development

is aan het veranderen

Geen échte scheiding tussen data en presentatie

• Informatie wordt gevraagd in de templates
  
  
• Informatie wordt aangepast in de templates
  
  
• Templates zijn WordPress afhankelijk
  
  

PHP

WordPress forceert PHP in de workflow

Eigenlijk zou WordPress overbodig moeten zijn

• Wordt HTML opgeleverd en daarna vergeten?
  
  
• Wat nu als de template moet veranderen?

2. Wat er moet
veranderen

Weg met
WordPress

Introduceer een template engine

Samenwerken

en verder werken

Vervang
WordPress

met je eigen generator

Maak mock-up data

3. Hoe doe je er iets aan?

Want klagen kan iedereen.

Timber...

• berekend informatie
  
  
• geeft aan template file
  
  
• maakt er HTML van.

Timber!

• gebruikt Twig
  
  
• heeft prima documentatie
  
  
• is uit te breiden

In PHP

<?php
$thumb_id = get_post_thumbnail_id($post->ID);
$url = wp_get_attachment_url($thumb_id);
?>
<img src="<?php echo $url; ?>"
    alt="Thumbnail for <?php echo $post->post_title; ?>" />

In Twig + Timber

<img src="{{ post.thumbnail.src }}" alt="Thumbnail for Timber" />

Twig.js

• kan worden gebruikt met Node.js
  
  
• Grunt
  
  
• Gulp

Aanpak in Node.js

Wat moet er gebeuren?

• .twig bestanden ophalen
  
  
• data verzamelen Timber
  
  
• data verzamelen template
  
  
• HTML genereren

//get base information
var base = require("./data/timber.json");

//read files in ./views/
var files = fs.readdirSync("./views");
files.forEach(function handleFile (file) {
    //doStuff( base );
});

var template = Twig.twig({
    path: "./views/" + file,
    async: false
});

var data = base;

//check if *.json exists
var templateData = file.replace(".twig", ".json");
if (fs.existsSync("./data/" + templateData)) {
    //add the information
    _.extend(data, require("./data/" + templateData));
}

fs.writeFile("./dist/" + file.replace(".twig", ".html"),
    template.render(data));

var base = require("./data/timber.json");

var files = fs.readdirSync("./views");
files.forEach(function (file) {
    var template = Twig.twig({
        path: "./views/" + file,
        async: false
    });

    var data = base;

    //check if *.json exists
    var templateData = file.replace(".twig", ".json");
    if (fs.existsSync("./data/" + templateData)) {
        //add the information
        _.extend(data, require("./data/" + templateData));
    }

    fs.writeFile("./dist/" + file.replace(".twig", ".html"),
        template.render(data));
});

Voorbeeld project

Verder lezen

Gewoon proberen,

ben comfortabel.

Bedankt!

Gaya Kessler

@GayaNinja

http://gaya.ninja