Rewriting the Pomodoro application with single-file components

I hope you still remember and possibly even use the Pomodoro application that we developed in the first chapter of this book.

I would like to revisit it now and to do the same exercise we did in the previous section—define the components of the application and rewrite it using these components.

Let's have a look at our Pomodoro application. And now I am going to spoil you: I'll include a screenshot that already contains the kittens that are being shown during the resting time using http://thecatapi.com/api:

Rewriting the Pomodoro application with single-file components

The Pomodoro application in its Rest! state

There are some easily identifiable components:

  • The component of the controls (start, pause, end), let's name it ControlsComponent
  • The component of the time countdown, CowntdownComponent
  • The component of the title of the current state (Work!/Rest!), StateTitleComponent
  • The component of the kittens rendering that depends on the state (working or resting), KittensComponent (this is my favorite one!)

Now, please stop staring at the kitten and let's start implementing our Pomodoro application using single-file components! Some first steps to scaffold the application are as follows:

  1. Start by opening the scaffolded Pomodoro application from the previous chapter or create a new application based on the Webpack template.
  2. Run npm install and npm run dev in the application folder.
  3. Ensure that your index.html looks like the following: 
          <!DOCTYPE html> 
      <html> 
        <head> 
          <meta charset="utf-8"> 
          <title>pomodoro</title> 
        </head> 
        <body> 
          <app></app> 
        </body> 
      </html>
  4. Ensure that your main.js file looks like the following: 
          import Vue from 'vue' 
      import App from './App' 
 
      /* eslint-disable no-new */ 
      new Vue({ 
        el: 'app', 
        components: { App } 
      })
  5. Open your browser to the page localhost:8080.
  6. Then, like in the previous example, go to the components folder and create all the necessary .vue components.
  7. Go to App.vue, and import and register all the created components.
  8. In the <template> section of each of the components, put something that will uniquely identify it so that we can easily recognize it when checking the page.

You will almost certainly come to the structure and the initial code, which looks something like the following:

Rewriting the Pomodoro application with single-file components

The very initial state of the Pomodoro application implemented with single-file components

Now, let's assume that our components are ready to use and let's place them where they belong into the application's layout, accordingly.

I will just slightly remind you how the whole application's markup looked earlier:

<div id="app" class="container"> 
  <h2> 
    <span>Pomodoro</span> 
    // Looks like our ControlsComponent 
    <button > 
      <i class="glyphicon glyphicon-play"></i> 
    </button> 
    <button > 
      <i class="glyphicon glyphicon-pause"></i> 
    </button> 
    <button > 
      <i class="glyphicon glyphicon-stop"></i> 
    </button> 
  </h2> 
  // Looks like our StateTitleComponent 
  <h3>{{ title }}</h3> 
  // Looks like our CountdownComponent 
  <div class="well"> 
    <div class="pomodoro-timer"> 
      <span>{{ min }}</span>:<span>{{ sec }}</span> 
    </div> 
  </div> 
  // Looks like our KittensComponent 
  <div class="well"> 
    <img :src="catImgSrc" /> 
  </div> 
</div>

You've probably noticed that I removed some parts that are responsible for the class bindings or actions handlers. Do not worry. Remember Scarlett O'Hara in Gone with the Wind? She used to say,

"I can't think about that right now. I'll think about that tomorrow."

( http://goo.gl/InYm8e ). Scarlett O'Hara was a wise woman. Be like Scarlett O'Hara. For now, we will focus merely on the <template> tag for our App.vue. Everything else will come later and we will think about it then. Now we can basically copy and paste this HTML snippet and replace the sections that we identify, such as the components with their kebab-case names. So, the template in App.vue will look like the following:

//App.vue 
<template> 
  <div id="app" class="container"> 
    <h2> 
      <span>Pomodoro</span> 
      <controls-component></controls-component> 
    </h2> 
    <state-title-component></state-title-component> 
    <countdown-component></countdown-component> 
    <kittens-component></kittens-component> 
  </div> 
</template>

A bit smaller, huh? Check your browser with your app opened. Not very beautiful and for sure has nothing to do with our Pomodoro application, but... it works!

Rewriting the Pomodoro application with single-file components

Pomodoro application bootstrapped as a single-file components application

What should we do now? Copy the corresponding markup to their component's <template> sections. Please do this tiny copy and paste by yourself, let it be a small home exercise. However, if you want to check yourself, take a look at the chapter3/pomodoro folder. That's it for now! All the data bindings and interesting stuff will come in the next chapter. So do not close the book. However, do not forget to take some Pomodoro pauses.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.217.53.113