Building Applications with Spring 5 and Vue.js 2

Building Applications with Spring 5 and Vue.js 2

by James J. Ye
Released October 2018
Publisher(s): Packt Publishing
ISBN: 9781788836968

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

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.

Table of contents

  1. Title Page
  2. Copyright and Credits
    1. Building Applications with Spring 5 and Vue.js 2
  3. Dedication
  4. About Packt
    1. Why subscribe?
    2. Packt.com
  5. Contributors
    1. About the author
    2. About the reviewer
    3. Packt is searching for authors like you
  6. Preface
    1. Who this book is for
    2. What this book covers
      1. Download the example code files
      2. Download the color images
      3. Conventions used
    3. Get in touch
      1. Reviews
  7. Modern Web Application Development - This Is a New Era
    1. Introduction
    2. JavaScript from a Java developer's viewpoint
      1. Functions and methods
      2. Objects and classes
      3. Objects, properties, and property attributes
      4. Prototype and inheritance
      5. Scope and closure
      6. The this keyword
      7. Hoisting
    3. ES6 basics
      1. Block scoping, let, and const
      2. Classes
      3. Enhanced object literals
      4. Arrow functions
        1. No lexical this
        2. No prototype object
      5. Default parameter value
      6. Rest parameters
      7. Spread syntax
      8. Destructuring assignment
        1. Object destructuring
        2. Array destructuring
        3. Nested destructuring
        4. Rest elements
        5. Function parameters destructuring
      9. Template literals
      10. Modules
        1. Export
        2. Import
      11. Promises
    4. Summary
  8. Vue.js 2 - It Works in the Way You Expected
    1. Fundamental concepts
      1. Vue instance
      2. Components
      3. Vue instance life cycle
      4. Directives
      5. Filters
      6. Mixins
      7. Plugins
    2. Behind the scene
      1. Reactivity system
    3. Summary
  9. Spring 5 - The Right Stack for the Job at Hand
    1. Spring IoC and dependency injection
      1. Spin up the Spring container
      2. Annotation-based configuration
        1. Bean declaration
        2. Dependency injection
          1. Constructor-based injection
          2. Setter-based/method-based injection
          3. Field-based injection
        3. Best practices of dependency injection
    2. Spring MVC
      1. Java EE Servlet
      2. DispatcherServlet
      3. Views
      4. Filters
    3. Spring JDBC and JPA
      1. JDBC driver
      2. Spring JDBC
      3. Hibernate
    4. Spring AOP
      1. Concerns
      2. Aspects
      3. Join points
      4. Advices
      5. Pointcuts
      6. AOP proxy
      7. Weaving
      8. @SecurityCheck
      9. AOP execution flow
    5. Spring transaction management
      1. PlatformTransactionManager
      2. Declarative transaction management
    6. Spring Boot
      1. Starters
      2. Autoconfiguration
    7. Put it together
      1. Place code together
      2. Add APIs
      3. HTTP client – axios
      4. Package app.messages
    8. Summary
  10. TaskAgile - A Trello-like Task Management Tool
    1. Managing requirements in an Agile way
      1. Levels of requirements
      2. Writing a requirement in an Agile project
    2. Writing effective user stories
      1. Tips on writing user stories
      2. TaskAgile user stories
        1. Users
        2. Teams
        3. Boards
        4. Card Lists
        5. Cards
    3. Creating wireframes
    4. Understanding Agile
      1. The Agile manifesto
        1. Individuals and interactions over processes and tools
        2. Working software over comprehensive documentation
        3. Customer collaboration over contract negotiation
        4. Responding to change over following a plan
    5. Full-stack developer skillsets
      1. Requirement analyzing
      2. Communication
      3. Wireframes creating
      4. Data modeling
      5. API designing
      6. Frontend coding
      7. Backend coding
      8. Unit tests and automation tests
      9. Continuous integration
      10. Server monitoring and architecture awareness
    6. Summary
  11. Data Modeling - Designing the Foundation of the Application
    1. Introduction to data modeling
      1. Data modeling stages and deliverables
        1. Conceptual data modeling
        2. Logical data modeling
        3. Physical data modeling
      2. Terminologies used in data modeling
        1. Entities
        2. Attributes
        3. Relationships
        4. Primary keys
        5. Foreign keys
    2. Goals of data modeling
      1. Completeness
      2. Minimal redundancy
      3. Extensibility
      4. Consistency
    3. Conceptual data modeling with ER diagrams
      1. Crow's foot notation
      2. The naming convention
      3. TaskAgile conceptual data models
      4. Subtypes and supertypes
    4. Logical data modeling
    5. Physical data modeling for RDBMS
      1. The naming convention
    6. Physical data modeling for MongoDB
    7. Summary
  12. Code Design - Designing for Stability and Extensibility
    1. Agile code design
      1. What is code design?
        1. Traditional angle
        2. A second angle
        3. Differences between the two angles
      2. Levels of code design
        1. Architecture level
        2. Abstraction level
        3. Implementation level
      3. Devil in the details
      4. Symptoms of bad design
        1. Rigidity
        2. Fragility
        3. Opacity
        4. Immobility
        5. Viscosity
      5. Agile code design practices
        1. Architecture level
        2. Abstraction level
        3. Implementation level
    2. Design principles and design patterns
      1. SOLID design principles
        1. The Single Responsibility Principle (SRP)
        2. The Open-Closed Principle (OCP)
        3. The Liskov Substitution Principle (LSP)
        4. The Interface Segregation Principle (ISP)
        5. The Dependency Inversion Principle (DIP)
    3. TaskAgile code design
      1. Layered architecture
      2. Hexagonal architecture
    4. Summary
  13. RESTful API Design - Building Language Between Frontend and Backend
    1. RESTful API characteristics
      1. REST architectural constraints
        1. Client-server
        2. Stateless
        3. Cache
        4. Uniform interface
        5. Layered system
        6. Code-on-demand (optional)
      2. RESTful interface constraints
        1. Identifications of resources
        2. Manipulation of resources through representations
        3. Self-descriptive messages
        4. Hypermedia as the engine of the application state
      3. Opinionated RESTful API
        1. Richardson Maturity Model
          1. Level zero
          2. Level one
          3. Level two
          4. Level three
        2. HATEOAS or not?
          1. What is HATEOAS?
          2. Why you won't need HATEOAS?
        3. Opinionated RESTful API characteristics
          1. Resource-centric
          2. Identifiable through URIs
          3. Defining operations via HTTP methods
          4. Use of HTTP status codes
          5. Versioning
          6. Stateless
          7. Pagination
          8. Searching and sorting
          9. Security
    2. RESTful API design procedure
      1. Finding out the requirements
      2. Identifying resources
      3. Fleshing out API details 
    3. RESTful API implementation in Spring MVC
      1. MVC annotations
      2. Spring HATEOAS
      3. Spring REST Docs
    4. RESTful API consuming
      1. HTTP client
      2. Server-side consuming
    5. RESTful API testing
      1. Unit testing of the Messages App
    6. Summary
  14. Creating the Application Scaffold - Taking off Like a Rocket
    1. Setting up the development environment
    2. Creating the backend scaffold with Spring Initializr
      1. File structure
      2. Committing and pushing
      3. Running the application
    3. Creating the frontend scaffold
      1. File structure
      2. Cleaning up and reorganizing
      3. Didn't we miss something?
    4. Putting two ends together
      1. Building with a single command
      2. Bridging the communication
    5. Introducing vue-router
      1. Spring MVC request mapping
    6. Fixes at the end
    7. Summary
  15. Forms and Validation - Starting with the Register Page
    1. Building a UI with Bootstrap 4
      1. Install and use Bootstrap
      2. Implement the UI of the register page
        1. Create layout diagram
        2. TDD of the register page
        3. Implement the UI
    2. Build registration forms with Vue.js
      1. Write test code for the form
      2. Implement the form bindings
      3. Handle form submit
        1. Test the submitForm() method
        2. Implement the submitForm() method
      4. Communicate with the backend
        1. Test the register() method 
        2. Implement the register() method
    3. Validation on the frontend
      1. Test the data validation
      2. Validate form data with Vuelidate
        1. Improve the tests
    4. Validation on the backend
      1. Creating RegistrationPayload
        1. Create RegistrationPayloadTests
        2. Create RegistrationPayload
      2. Create RegistrationApiController
        1. Create RegistrationApiControllerTests
        2. Implement RegistrationApiController and its dependencies
    5. Implement registration in domain model
      1. Implement the UserService application service
        1. Create UserServiceImplTests
          1. Create MailManager
          2. Build domain events
        2. Implement the UserServiceImpl class
      2. Implement RegistrationManagement
        1. Create RegistrationManagementTests
        2. Implement the RegistrationManagement class
        3. Implement RegistrationManagement dependencies
      3. Implement UserRepository
        1. Create HibernateUserRepositoryTests
        2. Implement HibernateUserRepository
    6. Fixes at the end
    7. Summary
  16. Spring Security - Making Our Application Secure
    1. How to secure a web application
      1. Authenticating users
        1. Single Sign-On
        2. OAuth 2.0
      2. Authorizing users
      3. Preventing attacks
    2. Introducing Spring Security
      1. Spring Security core concepts
    3. Spring Security deep dive
      1. Setting up Spring Security
      2. Spring Security filter chain
      3. Spring Security in action
        1. Unauthenticated request on public resource
        2. Unauthenticated request on protected resource
      4. Spring Security authentication in depth
        1. SecurityContextPersistenceFilter
        2. UsernamePasswordAuthenticationFilter
      5. Spring Security authorization in depth
        1. FilterSecurityInterceptor
        2. Method security 
    4. Building the login page
      1. Implementing the login page UI
      2. Implementing PasswordEncryptorDelegate
      3. Implementing authentication in the backend
        1. Implementing AuthenticationFilter
        2. Implementing UserDetailsService
        3. Implementing UserDetails
        4. Updating SecurityConfiguration
    5. Sending emails using JavaMail
      1. MailManager and its dependencies
        1. Testing DefaultMailManager
        2. Implementing DefaultMailManager
        3. Implementing AsyncMailer
        4. Application properties
    6. Performing end-to-end integration tests
      1. Correcting the port
      2. Using Page Objects
      3. Autogenerating user test data
      4. Testing in specific order
    7. Fixes at the end
    8. Summary
  17. State Management and i18n - Building a Home Page
    1. State management with Vuex
      1. Drawbacks of traditional state management
      2. Modern state management
      3. Vuex in a nutshell
    2. Building home page frontend
      1. UI of the home page
      2. Home page layout and components
      3. Data structure and state management
      4. Backend APIs
        1. Creating a personal board API
        2. Creating the team API
        3. Creating team board API
        4. A combined API to get the user's name, boards, and teams
      5. Implementing home page frontend
        1. Implementing the services and Vuex store
        2. Implementing popup windows with Bootstrap modal
    3. Building the home page backend
      1. Domain models
      2. API handlers
      3. Application services
      4. Repositories and the generic save() method
    4. Adding i18n support with Vue-i18n
    5. Logging SQL queries and performance tuning
    6. Fixes at the end
    7. Summary
  18. Flexbox Layout and Real-Time Updates with WebSocket - Creating Boards
    1. Building the frontend of the board page
      1. The UI of the board page
      2. The layout of the board page
        1. Designing the overall layout
      3. Implementing drag and drop
    2. Building the backend of the board page
      1. APIs for the board page
      2. Changing positions in batch
    3. Implementing real-time updates with WebSocket
      1. Introduction to SockJS
      2. Introduction to Spring WebSocket
      3. The channel-based communication pattern
        1. Frontend implementation of the real-time client
        2. Authenticating a real-time client with JWT
        3. Server implementation of channel handlers
    4. Fixes at the end
    5. Summary
  19. File Processing and Scalability - Playing with Cards
    1. Building the frontend of the card modal
      1. The UI of the card modal window
      2. The layout of the card modal window
      3. Router for board URL and card URL
      4. Implement auto-resize of card title editing
      5. Implementing support of the Markdown format
      6. Implementing file uploads
    2. Building the backend of the card modal
      1. APIs for the card modal
        1. Get card API
        2. Change card title API
        3. Change card description API
        4. Add comment API
        5. Get activities API
        6. Add attachment API
        7. Get attachments API
      2. Saving the uploaded file
      3. Generating thumbnails for images
      4. Storing files to S3
    3. Tracking activity asynchronously with AMQP
      1. Adding card cover images and activity tracking
    4. Fixes at the end
    5. Summary
  20. Health Checking, System Monitoring - Getting Ready for Production
    1. Installing as a service
    2. Spring Profile
      1. The dev profile
      2. The test profile
      3. The end-to-end test profile
      4. The staging and production profile
    3. Spring Boot Actuator
      1. The health endpoint
      2. The info endpoint
      3. The metrics endpoint
      4. The environment endpoint
      5. Endpoint security
        1. Using a different port and firewall
        2. Using the same port and Spring Security
        3. Using a custom filter
    4. Monitoring with Icinga 2
    5. Fixes at the end
    6. Summary
  21. Deploying to the Cloud with Jenkins - Ship It Continuously
    1. Continuous delivery
      1. Registration API integration test
      2. Maturity and cost
      3. Refactoring E2E tests
        1. Running E2E tests during the writing
        2. Running E2E tests before pushing the code to VCS
          1. Run E2E tests after deploying to staging
    2. Last fix before rolling out
    3. Let's ship it
      1. Preparing a Dockerfile
      2. Preparing a Jenkinsfile
      3. Server preparation
        1. Installing MySQL
        2. Installing RabbitMQ
        3. Installing NGINX and the SSL certificate
      4. Building with Jenkins
    4. Summary
    5. Further reading
  22. Other Books You May Enjoy
    1. Leave a review - let other readers know what you think

Product information

  • Title: Building Applications with Spring 5 and Vue.js 2
  • Author(s): James J. Ye
  • Release date: October 2018
  • Publisher(s): Packt Publishing
  • ISBN: 9781788836968