Build Responsive SPAs with Bootstrap 4, Vue.js 2, and Firebase
Olga Filipova
Purchase Now !
Just with Paypal
Just with Paypal
Book Details
Price
|
2.50 |
|---|---|
Pages
| 310 p |
File Size
|
6,048 KB |
File Type
|
PDF format |
ISBN
| 978-1-78829-092-0 |
Copyright©
| 2017 Packt Publishing |
Olga Filipova was born in Kyiv, in Ukraine. She grew up in a family of physicists,
scientists, and professors. She studied system analysis in the National University of
Ukraine Kyiv Polytechnic Institute. At the age of 20, she moved to Portugal, where
she did her bachelors' and masters' degrees in computer science from the University
of Coimbra. During her studies, she participated in the research and development
of European projects and became an assistant teacher of operating systems and
computer graphics subjects. After obtaining her masters' degree, she started working
at Feedzai. At that time, it was a small team of four, starting the development of a
product from scratch, and now, it is one of the most successful Portuguese startups.
At some point, her main responsibility became to develop a library written in
JavaScript whose purpose was to bring data from the engine to the web interface.
This marked Olga's main direction in tech: web development. At the same time, she
continued her teaching practice, giving a course of professional web development to
the local professional education center in Coimbra.
In 2013, along with her brother and her husband, she started an educational project
based in Ukraine. This project's name is EdEra and it has grown up from a small
platform of online courses into a big player at the Ukrainian educational system
scene. Currently, EdEra is moving towards an international direction and preparing
an awesome online course about IT. Don't miss it!
In 2014, Olga, with her husband and daughter, moved from Portugal to Berlin, where
she started working at Meetrics as a frontend engineer and, after a year, became
the team lead of an amazing team of frontend software developers. Currently Olga
works in a fintech company called OptioPay as a lead frontend engineer.
Olga is happily married to an awesome guy called Rui, who is also a software
engineer. Rui studied with Olga at the university of Coimbra and worked with her
at Feedzai. Olga has a smart and beautiful daughter, Taissa, a fluffy cat, Patusca, and
two fluffiest chinchillas, Barabashka and Cheburashka.
About the Reviewer
Jan-Christian Nikles had already started tinkering around with computers in his
teenage years and had developed a strong passion for it. After graduating from high
school, he first followed a different path and studied audio engineering, since music
plays a big role in his life.
He worked in this business for several years, mostly in television production. But
soon enough, he found his way back to his old passion.
Graduating in media computer science at the Beuth University of Applied Science,
Berlin, in 2013, Jan worked in multiple companies—agency work, early-stage startups,
and, most recently, at Meetrics. While coming from a fullstack background
originally, he specialized in frontend development with cutting-edge technologies.
The fast paced JavaScript ecosystem both overwhelmed and fascinated him, but
his fascination lasted eventually. He saw the whole thing starting from Vanilla JS,
over the big, messy jQuery era, leading to very sophisticated frameworks that make
JavaScript development such a pleasure these days. Jan lives and works in Berlin,
Germany, always looking for new and interesting projects.
Preface
This book is about web development using Vue.js, Bootstrap, and Firebase. We will
start with a simple tutorial, followed by the detailed explanation of it, and then,
we will create a fully functional application from scratch. The application itself is
a simple Pomodoro timer with integrated office workouts during the Pomodoro
breaks. Throughout the book, you will go through the whole software development
process, starting from the definition of requirements, user stories, and mockups,
proceeding to the basic scaffolding, and followed by enriching the application with
complex features such as authentication, routing, collaborative content, and finishing
thorough testing and deployment. You will learn how to use Firebase to implement
the authentication and storage for your Vue application and, in the end, how to
deploy it. You will enjoy using Bootstrap along with your Vue application in order
to easily implement complex components and achieve their responsiveness. You
will revisit your trigonometry knowledge by having fun in using it with SVG and
Vue.js to build a reactive timer component. So, technology-wise, we will cover as the
following topics:
• Vue.js data binding and single file components
• Routing using vue-router
• Server-side rendering and code splitting using nuxt.js
• Testing with jest
• Real-time databases with Firebase
• Authentication using Firebase Authentication
• Deployment using Firebase
• Combining SVG, trigonometry, and Vue.js in reactive components
In the end, you will have your fully functional and fun Pomodoro application ready
to use on a daily basis and to keep you fit at your workplace.
Table of Contents
Preface v
Chapter 1: Please Introduce Yourself – Tutorial 1
Hello, user 1
Creating a project in the Firebase console 2
Adding a first entry to the Firebase application database 3
Scaffolding a Vue.js application 4
Connecting the Vue.js application to the Firebase project 6
Adding a Bootstrap-powered markup 10
Adding a form using Bootstrap 13
Making things functional with Vue.js 14
Adding utility functions to make things look nicer 17
Exercise 19
Extracting message cards to their own component 19
Exercise 21
Deploying your application 22
Extra mile – connecting your Firebase project to a custom domain 24
Summary 25
Chapter 2: Under the Hood – Tutorial Explained 27
Vue.js 28
Vue project – getting started 31
Including directly in script 31
CDN 31
NPM 31
Vue-cli 31
Vue directives 32
Conditional rendering 33
Text versus HTML 34
Loops 37
Binding data 38
Handling events 41
Vue components 46
Exercise 52
Vue router 53
Vuex state management architecture 57
Bootstrap 66
Bootstrap components 67
Bootstrap utilities 70
Bootstrap layout 70
Combining Vue.js and Bootstrap 71
Exercise 73
Combining Vue.js and Bootstrap continued 74
What is Firebase? 75
Summary 78
Chapter 3: Let's Get Started 79
Stating the problem 80
Gathering requirements 81
Personas 82
User stories 84
Retrieving nouns and verbs 85
Nouns 86
Verbs 86
Mockups 88
The first page – login and register 90
The main page displaying the Pomodoro timer 91
Workout during the break 92
Settings 93
Statistics 94
Workouts 95
Logo 96
Summary 97
Chapter 4: Let It Pomodoro! 99
Scaffolding the application 99
Defining ProFitOro components 101
Exercise 106
Implementing the Pomodoro timer 106
SVG and trigonometry 107
Exercise 116
Implementing the countdown timer component 117
Responsiveness and adaptiveness of the countdown
timer using Bootstrap 119
Countdown timer component – let's count down time! 122
Exercise 128
Pomodoro timer 128
Exercise 131
Introducing workouts 133
Summary 135
Chapter 5: Configuring Your Pomodoro 137
Setting up a Vuex store 137
Defining actions and mutations 145
Setting up a Firebase project 149
Connecting the Vuex store to the Firebase database 150
Exercise 155
Summary 155
Chapter 6: Please Authenticate! 157
AAA explained 157
How does authentication work with Firebase? 158
How to connect the Firebase authentication API to a web
application 161
Authenticating to the ProFitOro application 162
Making the authentication UI great again 168
Managing the anonymous user 171
Personalizing the Pomodoro timer 173
Updating a user's profile 177
Summary 182
Chapter 7: Adding a Menu and Routing Functionality Using
vue-router and Nuxt.js 183
Adding navigation using vue-router 185
Exercise - restrict the navigation according to the authentication 188
Using Bootstrap navbar for navigation links 189
Code splitting or lazy loading 194
Server-side rendering 196
Nuxt.js 196
Adding links with nuxt-link 200
Exercise – making the menu button work 203
Nuxt.js and Vuex store 203
Nuxt.js middleware 204
Exercise – finish 'em all! 205
Summary 206
Chapter 8: Let's Collaborate – Adding New Workouts
Using Firebase Data Storage and Vue.js 207
Creating layouts using Bootstrap classes 208
Making the footer nice 210
Storing new workouts using the Firebase real-time database 211
Storing images using the Firebase data storage 216
Let's search! 220
Using a Bootstrap modal to show each workout 223
Exercise 227
It's time to apply some style 227
Summary 231
Chapter 9: Test Test and Test 233
Why is testing important? 235
What is Jest? 236
Getting started with Jest 236
Coverage 239
Testing utility functions 240
Mocking with Jest 242
Testing Vuex store with Jest 246
Testing mutations 247
Asynchronous testing with Jest – testing actions 248
Making Jest work with Vuex, Nuxt.js, Firebase,
and Vue components 254
Testing Vue components using Jest 256
Snapshot testing with Jest 259
Summary 263
Chapter 10: Deploying Using Firebase 265
Deploying from your local machine 265
Setting up CI/CD using CircleCI 268
Setting up staging and production environments 276
What have we achieved? 279
Summary 280
Index 283
Bookscreen
Who this book is for
This book is for web developers or for someone who wants to become one. You will
build a full-stack web application from scratch until its deployment. Even if you are
an experienced programmer, you will probably find something new for yourself. If
you are working with Vue.js, you will find out how to connect a Vue.js application to
the Google Firebase backend. If you work with Bootstrap, you will learn how nicely
it plays along with a Vue.js application. If you already work with Vue.js, Bootstrap,
and Firebase, you will find out how to leverage the power of these three things to
easily build complex applications. If you already use these technologies together,
you will have fun building yet another application during the course of this book.
What you need for this book
The requirements for this book are as follows:
• A computer with an active internet connection
• Text editor/IDE
• Node.js