Building Applications with Spring 5 and Vue.js 2

Build a modern, full-stack web application using Spring Boot and Vuex

James J. Ye

• Publisher: Packt Publishing
• Year: 2018
• ISBN:
  9781788831253
• Edition: 1
• Topic: Informatik
• Subtopic: Webprogrammierung

Become efficient in both frontend and backend web development with Spring and Vue

Key Features

• Connect application's frontend and backend with Vue, Vuex, and Spring Boot
• Leverage the latest web standards to enhance code performance, readability, and cross-compatibility
• Build secure full-stack web applications with Spring Security

Book Description

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.

What you will learn

• Analyze requirements and design data models
• Develop a single-page application using Vue.js 2 and Spring 5
• Practice concept, logical, and physical data modeling
• Design, implement, secure, and test RESTful API
• Add test cases to improve reliability of an application
• Monitor and deploy your application to production

Who this book is for

Building Applications with Spring 5.0 and Vue.js 2.0 is for you if you are developer who is new to Vue.js or Spring. It is assumed that you have some knowledge of HTML, CSS, and Java.

Modern Web Application Development - This Is a New Era

The diversity of the modern web application development ecosystem is increasing at an astonishing rate. You can see new frameworks and libraries coming out almost every day. People seem to be happy with constantly reinventing the wheel. This could be daunting to new learners as the time it takes to master a new skill makes it sometimes difficult to keep pace with the rate with which technologies are evolving. And this has caused frequent complaints of making web development unnecessarily complicated, as there are many new libraries and frameworks to learn and a large number of new tools to familiarize yourself with.

The anxiety associated with the feeling that you might not be able to keep up with the mainstream can be released once you have learned how to create a full-stack modern web application and master the skill sets that are required to build such an application. And, with this book, you will learn these skill sets and realize that being a full-stack developer is not only about knowing how to write frontend and backend code. In this book, we will create a real-world, full-stack web application and cover most of the skills that a full-stack developer would require. And once you have finished reading it, you will understand that languages and frameworks are just tools in your toolbox. You can replace them with other languages and frameworks and also build great full-stack applications.

To start our journey, we will begin with the basics. Once you have those basics imprinted in your mind, you can learn the frameworks more efficiently. In this chapter, we will cover the following topics:

• An introduction to the full-stack web application we will build in this book
• Learning JavaScript from a Java developer's viewpoint
• Learning the features of ECMAScript 2015 that we will use in this book

Introduction

If you're creating a résumé page for your personal website, it will most likely be sufficient to write it in vanilla JavaScript, HTML 5, and some creative CSS style sheets that make it look special and unique. And if you're creating the jobs page of your company's official website, doing it barehanded might work. But if you use a number of frameworks to style the page and to process logic and animations, you will find yourself in a much better position that you can still go home from work earlier than usual and enjoy a cup of coffee with friends at the weekend. And if you're building something like Monster (https://www.monster.com/) I hope that you are not just carrying those favorite frameworks with you to the battlefield, and if you go barehanded, you wouldn't even make it there. With the level of complexity of such an application and the fact that you will need to keep improving or changing features because of the neverending stop-change requirements, you need to bring the tools for modern web application development with you.

Sometimes, people use the term vanilla JavaScript to refer to using plain JavaScript without any additional libraries, such as jQuery, Lodash, and many more. That means that you write your code with only the APIs that the JavaScript language itself provides.

In this book, we will create a modern web application called TaskAgile, which is a Trello-like application for task management. Let's first get an overview of the technologies that we will use to build it.

For the frontend, we will use Vue.js 2 as our frontend application framework, Bootstrap 4 as the UI framework, and we will write our frontend in ES6, also known as ECMAScript 2015, or ES 2015, and then use Babel to compile it into ES5 code. We will use ESLint to check our JS code to make sure it follows all the rules we defined and use Flow (https://flow.org) for static type checking. We will use Jest to write our frontend unit testing's and use Nightwatch.js to run our end-to-end test cases. We will use webpack 4 to bundle all the dependencies and use npm to take care of the package management.

For the backend, we will use Spring Boot 2 to create a Spring 5 application. And we will use Hibernate 5 as our object-relational mapping (ORM) framework, and MySQL as our database. We will use Spring Security for authentication and authorization, an...

Table of contents

• Title Page
• Copyright and Credits
• Dedication
• About Packt
• Contributors
• Preface
• Modern Web Application Development - This Is a New Era
• Vue.js 2 - It Works in the Way You Expected
• Spring 5 - The Right Stack for the Job at Hand
• TaskAgile - A Trello-like Task Management Tool
• Data Modeling - Designing the Foundation of the Application
• Code Design - Designing for Stability and Extensibility
• RESTful API Design - Building Language Between Frontend and Backend
• Creating the Application Scaffold - Taking off Like a Rocket
• Forms and Validation - Starting with the Register Page
• Spring Security - Making Our Application Secure
• State Management and i18n - Building a Home Page
• Flexbox Layout and Real-Time Updates with WebSocket - Creating Boards
• File Processing and Scalability - Playing with Cards
• Health Checking, System Monitoring - Getting Ready for Production
• Deploying to the Cloud with Jenkins - Ship It Continuously
• Other Books You May Enjoy