"Doing" Development Journal - Starting the Project

Previously I stated the problem I will be solving, and outlined a possible solution. Now I will actually set up the project and start a tiny bit of coding.

Doing could be built with any number of tools, frameworks, and technologies, but I would like to use this project to put Ivy to the test. We will implement Doing as a single page web app.

Setting Up a Project

It does not take much to get started. We'll start with a simple project layout like this:

README.md    - About the application
index.html   - Application structure

js/
  doing.js   - Application logic
  vendor/    
    ivy.js   - A copy of the Ivy

css/
  doing.css  - Application styling

HTML

The HTML is pretty straightforward, though we don't need some of the boilerplate I have grown used to.

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
<!-- ... -->

The doctype signals that this is should be treated as an HTML5 document. Notice that we are using charset instead of the longer:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

With HTML5, it seems they are interchangeable, so we might as well use the shortest options available. The utf-8 declaration also needs to be in the first 512 bytes of the document.

CSS

We will just define the bare minimum to make our page look pleasant for now:

body{
  font-family: sans-serif;
  font-size:14px;
  line-height:20px;

  margin: 20px;
}

To reference the stylesheet we'll add a link at the bottom of the head section:

<!-- ... -->
  <link rel="stylesheet" href="css/doing.css" type="text/css" media="screen" charset="utf-8">
</head>

What is important here is what's not included. We are postponing using anything like LESS or SASS, or any of the various CSS Bootstraps. These are all great options, and can save you a lot of time, but they also lead to fiddling with frameworks instead focussing on the application.

JavaScript

I have cheated a bit, and already decided that I will use Ivy. We will skip using jQuery, Backbone, or any other JavaScript libraries until we need them. Likewise we won't bother with build scripts, loaders, minification, or anything else for now. The application comes first, we can play with architecture once we have something useful.

Ivy and the application's script are referenced at the bottom of our page so that they do not block loading:

<!-- ... -->
  <!-- Libraries -->
  <script src="js/vendor/ivy.js" type="text/javascript" charset="utf-8"></script>

  <!-- Application Code -->
  <script src="js/doing.js" type="text/javascript" charset="utf-8"></script>
</html>

Ivy

Just to make sure everything is working, we will add a little interactivity with Ivy. We will make the header display the current activity:

<h1 data-bind='text: activity'></h1>
<p>What are you going to do?</p>  
<input data-bind='value: activity keyup'/>

Now to hook this up with Ivy, we will declare an Ivy.attr and bind it to the document as activity:

For the moment, that script tag can just sit at the bottom of the page, it will be thrown out in a few minutes anyways.

Now when I load the page I'll see this:

It's alive!

Everything is working, when I type in the field, the header updates. This is a fine place to pause before wiring up some more logic in JavaScript.

blog comments powered by Disqus
Monkey Small Crow Small