Book Image

Building Applications with Spring 5 and Vue.js 2

By : James J. Ye
Book Image

Building Applications with Spring 5 and Vue.js 2

By: James J. Ye

Overview of this book

Building Applications with Spring 5 and Vue.js 2, with its practical approach, helps you become a full-stack web developer. As well as knowing how to write frontend and backend code, a developer has to tackle all problems encountered in the application development life cycle – starting from the simple idea of an application, to the UI and technical designs, and all the way to implementation, testing, production deployment, and monitoring. With the help of this book, you'll get to grips with Spring 5 and Vue.js 2 as you learn how to develop a web application. From the initial structuring to full deployment, you’ll be guided at every step of developing a web application from scratch with Vue.js 2 and Spring 5. You’ll learn how to create different components of your application as you progress through each chapter, followed by exploring different tools in these frameworks to expedite your development cycle. By the end of this book, you’ll have gained a complete understanding of the key design patterns and best practices that underpin professional full-stack web development.
Table of Contents (23 chapters)
Title Page
Copyright and Credits
Dedication
About Packt
Contributors
Preface
Index

Preface

This book covers the full set of technologies that you need to know about to become a full-stack web developer with Spring and Vue.js. Spring is the most widely used framework for Java programming, and with its latest update to version 5, the framework has undergone some massive changes. Spring supports MVC architectural stylesand is the most popular framework of its kind. Along with Spring in this stack, we will use Vue.js. Vue.js is a lightweight JavaScript framework. Since its release, it has managed to establish itself as one of the most popular frameworks for building user interfaces and is seeing a rapid adoption rate. In this book, you'll become familiar with these technologies while learning to develop a practical web application. You'll discover each technology in the full stack as you build an application up, one layer at a time, just as you'd do in a real project. From initial structuring to full deployment, this book provides step-by-step guidance for developing a web application from scratch with Vue.js and Spring. This book takes a very practical approach to becoming a full-stack web developer. You will create the different components of your application as you progress through each chapter. You will walk through the different tools in each of these frameworks to expedite your development cycle. Finally, this book will also demonstrate the key design patterns and best practices that underpin professional full-stack web development.

Who this book is for

This book is for developers who want to learn full-stack web application development with Spring Framework 5 and Vue.js 2. It introduces you to the full set of technologies and tools that you need for developing a practical web application. It doesn't assume that you have any prior knowledge of Vue.js or Spring Framework. However, you will be better prepared if you have some basic experience with HTML, CSS, and JavaScript on the frontend side, and the Java language, servlets, and JDBC on the server side.

What this book covers

Chapter 1, Modern Web Application Development - This Is a New Era, introduces JavaScript from a Java developer's perspective by highlighting the parts that confuse Java developers the most. It also introduces the basics of ES6.

Chapter 2, Vue.js 2 - It Works in the Way You Expected, introduces all aspects of Vue.js 2, from its fundamental concepts to its internal reactivity system.

Chapter 3, Spring 5 - The Right Stack for the Job at Hand, introduces the major features of Spring Framework 5, including Inversion of Control (IoC) and dependency injection, Spring MVC, Spring JDBC, JPA, Spring AOP, transaction management, and Spring Boot.

Chapter 4, TaskAgile - A Trello-like Task Management Tool, introduces requirement management in an Agile project, user story writing, and wireframe creation. It also discusses the Agile methodology and the skill sets a full-stack developer should have.

Chapter 5, Data Modeling - Designing the Foundation of the Application, introduces data modeling, the goal of data modeling, and the three stages of data modeling: from conceptual data modeling to logical data modeling, and then to physical data modeling.

Chapter 6, Code Design - Designing for Stability and Extensibility, introduces Agile code design, design principles, and design patterns. It also discusses the code design of TaskAgile applications.

Chapter 7, RESTful API Design - Building Language Between Frontend and Backend, introduces RESTful API characteristics, RESTful API design procedure, the implementation of Spring MVC, API consumption, and API testing.

Chapter 8, Creating the Application Scaffold - Taking off Like a Rocket, introduces how to create an application scaffold with Spring Initializr and vue-cli, as well as how to put these two ends together.

Chapter 9, Forms and Validation - Starting with the Register Page, is a step-by-step tutorial on how to create the register page of a TaskAgile application, from the frontend to the backend, including unit tests at both ends.

Chapter 10, Spring Security - Making Our Application Secure, is a step-by-step tutorial on how to create the login page of a TaskAgile application, from the frontend to the backend, including end-to-end testing of the register page and the login page.

Chapter 11, State Management and i18n - Building a Home Page, is a step-by-step tutorial on how to create the home page of a TaskAgile application, covering the use of Vuex and the implementation of i18n.

Chapter 12, Flexbox Layout and Real-Time Updates with WebSocket - Creating Boards, is a step-by-step tutorial on how to create a boards-based UI by using Flexbox, as well as how to implement real-time updates with WebSocket.

Chapter 13, File Processing and Scalability - Playing with Cards, is a tutorial on the implementation of cards on the boards page. It focuses on file processing and the use of the message queue. 

Chapter 14, Health Checking, System Monitoring - Getting Ready for Production, focuses on the use of Spring Profile and Spring Boot Actuator to prepare for application release.

Chapter 15, Deploying to the Cloud with Jenkins - Ship It Continuously, introduces continuous delivery, the creation of API integration tests, and the use of Jenkins and Docker to ship an application.

Download the example code files

You can download the example code files for this book from your account at www.packt.com. If you purchased this book elsewhere, you can visit www.packt.com/support and register to have the files emailed directly to you.

You can download the code files by following these steps:

  1. Log in or register at www.packt.com.
  2. Select the SUPPORT tab.
  3. Click on Code Downloads & Errata.
  4. Enter the name of the book in the Search box and follow the onscreen instructions.

Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:

  • WinRAR/7-Zip for Windows
  • Zipeg/iZip/UnRarX for Mac
  • 7-Zip/PeaZip for Linux

The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/Building-Applications-with-Spring-5-and-Vue.js-2. In case there's an update to the code, it will be updated on the existing GitHub repository.

We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Download the color images

We also provide a PDF file that has color images of the screenshots/diagrams used in this book. You can download it here: https://www.packtpub.com/sites/default/files/downloads/9781788836968_ColorImages.pdf.

Conventions used

There are a number of text conventions used throughout this book.

CodeInText: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: "We will need to refactor BoardPage to make both routes work."

A block of code is set as follows:

 // Close a card
      if (to.name === 'board' && from.name === 'card') {
        this.closeCardWindow()
        this.openedCard = {}

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

 watch: {
'$route' (to, from) {
      // Switch from one board to another
      if (to.name === from.name && to.name === 'board')

Any command-line input or output is written as follows:

$ mvn install

Bold: Indicates a new term, an important word, or words that you see onscreen. For example, words in menus or dialog boxes appear in the text like this. Here is an example: "You can click the Attachment button to upload files."

Note

Warnings or important notes appear like this.

Note

Tips and tricks appear like this.

Get in touch

Feedback from our readers is always welcome.

General feedback: If you have questions about any aspect of this book, mention the book title in the subject of your message and email us at [email protected].

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packt.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details.

Piracy: If you come across any illegal copies of our works in any form on the Internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.

Reviews

Please leave a review. Once you have read and used this book, why not leave a review on the site that you purchased it from? Potential readers can then see and use your unbiased opinion to make purchase decisions, we at Packt can understand what you think about our products, and our authors can see your feedback on their book. Thank you!

For more information about Packt, please visit packt.com.