Building a Simple Decoupled Front-End

Video loading...

Join Drupalize.Me to watch this video

Join today and gain instant access to our entire video library.

Log in Sign up
  • 0:04
    In this lesson, we're going to build
  • 0:05
    a simple, decoupled front-end
  • 0:07
    blog application in JavaScript.
  • 0:09
    We're going to take a static HTML starter template,
  • 0:12
    and replace it with a hopefully
  • 0:13
    familiar template engine, Twig.
  • 0:15
    We're also going to be building out
  • 0:16
    the structure of our JavaScript,
  • 0:18
    once we've identified some common patterns,
  • 0:20
    and we're going to take a quick detour back
  • 0:04
    Nessa lição, iremos contruir
  • 0:05
    uma aplicação front-end simples
  • 0:07
    e dissociada em JavaScript.
  • 0:09
    Iremos pegar um template de início estático de HTML,
  • 0:12
    e substitui-lo com, esperançosamente,
  • 0:13
    um motor de templates familiar, o Twig.
  • 0:15
    Também iremos construir
  • 0:16
    a estrutura do nosso JavaScript,
  • 0:18
    uma vez que identificarmos alguns padrões comuns,
  • 0:20
    e iremos pegar um rápido desvio de volta
Loading ...

Building a Simple Decoupled Front-End

Loading...

In this tutorial we'll begin building our simple Javascript blog application. Starting with Bootstrap templates, we'll use a Javascript implementation of the Twig template language to make our blog dynamic. In the course of doing so, we'll learn about Cross Origin Resource Sharing (or CORS). We will also begin to identify some common implementation patterns in our Javascript, and start to refactor our code to improve its organization.

Self-check challenge: Create another sidebar block in our blog that pulls data from Open Weather Map to display the current temperature in your city.

Downloads: 
Log in or sign up to download companion files.
Additional resources: