EIEIOTECHNOVATION
← Training programmes

EIEIO / PROGRAMMING & DEVELOPMENT

Spring Boot with ReactJS

Course outline

5 days
Discuss this programme →

Duration

5 days

Overview

Website development strategies have been evolving continuously over the past two decades or so. In modern development, the most popular two key words are the frontend and the backend. These are often talked about separately and seen as two very different things, but they are both essential and closely connected in most web development projects. In simplest terms, the frontend is any code that runs in the browser and the backend is any code that runs on the server.

A framework provides a standard way to build and deploy applications. Framework provides generic functionality, which can be selectively changed by additional user-written code, thus providing application-specific software. Frameworks aim to facilitate software development by allowing programmers to devote their time to meeting software requirements rather than dealing with more standard low-level details of providing a working system, thereby reducing overall development time. For instance, a team developing a banking website can focus on writing code particular to banking rather than the mechanics of request handling, user role management and state management.

Web applications can be developed using existing JEE technologies such as servlets, JDBC, JSP. When application grows without a framework the hard-wired page navigations, control logic, business logic will start causing headaches and the code gets messy. Spring is an open source powerful Java application framework, used in a wide range of Java applications. Spring framework glues things together such as Struts, JSF, ORM frameworks and other facilities like Quartz, Email and most likely Spring supports almost everything. The drawback is it takes quite a lengthy process to set it up and running. Spring boot is built on totally a different thought. It is basically a suite, pre-configured with set of frameworks to reduce boiler plate configuration providing the shortest way to have a Spring web application up and running with smallest line of code / configuration out-of-the-box. It takes less than 20 lines to have a simple RESTful application up and running with almost zero configurations. In short, Spring Boot is the framework and tools designed to simplify the bootstrapping and development of a new Spring application and empower Java teams to build robust, hassle free applications.

ReactJS framework is a platform provided by Facebook’s to build fast, modern, scalable single page web applications (SPAs). The course covers the principles of SPA development, and then takes the students through the process of building a ReactJS user interface. The course introduces JSX, the pseudo-HTML used in building ReactJS components, and moves on creating composite components and controller views using props and state. The students will build and validate Web forms and use Facebook’s unidirectional design pattern Flux, combining stores and actions to communicate with Web services and manage state. Students will gain a deeper understanding of JSX, work with form components, implement React styles, and learn how to integrate unit tests for React components.

Benefits of having backend and frontend for a website are

  • Scalable
  • Resource Optimization
  • Easier Upgradation
  • Easier to switch Frameworks
  • Faster Deployment
  • Consolidation of API
  • Modularity

This course provides an introduction to Spring Boot and ReactJS. It discusses the features of Spring Boot and how to utilize Spring Boot to rapidly define, configure, and add features to applications using Spring Boot. Participant will set up working environment to have all the tools needed to start building ReactJS application with minimum effort.

Objective

  • Understand the basics of Web Application - POST, GET, HTTP, MVC Pattern
  • Create Spring MVC Applications using various options
  • Run the applications using the embedded servlet containers
  • Styling the web project using Bootstrap framework
  • Connect to databases using Spring Data
  • Build REST Services in Spring Boot
  • Secure your applications using Spring Security
  • Create an executable JAR of your application
  • Understand Spring Boot Actuator and Spring Boot Developer Tools
  • Understand single-page web application architectures
  • Use new JavaScript (ES6) features including Classes, Modules, and Arrow Functions
  • Build applications from scratch using ReactJS
  • Learn ReactJS coding and architecture best practices
  • Creating components using JSX, Props, state, and controller views
  • Understand model-driven forms, observables, dependency injection, and routing
  • Implementing the Flux design pattern
  • Leveraging stores and actions

Target Participants

The primary target audience for this course is software developers / programmers.

  • Developers new to Spring Boot
  • Web Developers who want to use the framework to its fullest potential, in order to develop, test and deploy Single-Page Applications using Angular.

Program Prerequisites

  • Students should be familiar with the Java programming language
  • Web Development Experience (HTML / CSS / JavaScript)
  • A computer that can run Spring Tools Suite

Mode of Delivery

Every participant will be provided with course notes and are required to bring in their own laptops for hands-on exercise and practice sessions.

Course Outcome

By end of this program every participant will complete “creating a web based staff profiling and an online leave management system”. The solution will allow the administrator to login and create staff. Every staff record will have multiple tabs consisting of address details and their leave eligibility. The customer will be able to login to the portal and view their details, modify their address details, apply leave online and go through the approval process.

Day 1

  • Programming Concepts
  • What is Programming
  • Components of a Programming Language
  • Programming Paradigms
  • What is Java
  • The Object-Oriented Paradigm and Java
  • What is a Java Program
  • Writing the Source Code
  • Compiling the Source Code
  • Running the Compiled Code
  • Using STS Tool Suite
  • Data Types
  • What is a Data Types
  • What is an Identifier
  • Data Types in Java
  • Primitive Data Types in Java
  • Special Floating-Point Numbers
  • Rounding Modes
  • What is an Operator
  • Assignment Operator
  • Declaration, Initialization and Assignment
  • Arithmetic Operators
  • String Concatenation Operator
  • Relational Operators
  • Boolean Logical Operators
  • Statements
  • What is a Statement
  • Type of Statements
  • A Block Statement
  • The if-else Statement
  • The switch Statement
  • The for Statement
  • The for-each Statement
  • The while Statement
  • The do-while Statement
  • The break Statement
  • The continue Statement
  • Classes and Objects
  • What is a Class
  • Declaring Fields in a Class
  • Creating Instances of a Class
  • The null Reference Type
  • Using Dot Notation to Access Fields of a Class
  • Default Initialization of Fields
  • Access Level Modifiers for a Class
  • Import Declaration
  • Declaring Methods of a Class
  • Local Variables
  • Instance Method and Class Method
  • Invoking a Method
  • Access Level for Class Members
  • Exception Handling
  • What is an Exception
  • Using a try-catch Block
  • Exception Class Hierarchy
  • Arranging Multiple catch Blocks
  • Throwing an Exception
  • Creating an Exception Class
  • The finally Block
  • The try-with-resources Block
  • Lab
  • Create Staff Interface
  • Create executive Class and non-executive Class
  • Create Command Line application - Staff Profile Module

Day 2

  • Introduction to Spring Boot
  • Introduction to Spring
  • "HelloWorld" Spring MVC application using Maven
  • Spring Framework Configuration
  • Java @Configuration Classes
  • Defining @Configuration Classes
  • Loading @Configuration Classes
  • Modularizing @Configuration Classes
  • Qualifying @Bean Methods
  • Trouble with Prototype Scope
  • Configuration with Spring Expression Language
  • Resolving Text Messages
  • Spring Property Conversion
  • Spring Converter Interface
  • Using Custom Converters
  • Spring PropertyEditors
  • Registering Custom PropertyEditors
  • Introduction to Spring Boot
  • What is Spring Boot?
  • Spring Boot Main Features
  • Understanding Java Annotations
  • Spring MVC Annotations
  • Example of Spring MVC-based RESTful Web Service
  • Spring Booting Your RESTful Web Service
  • Spring Boot Skeletal Application Example
  • Converting a Spring Boot Application to a WAR File
  • Externalized Configuration
  • Starters
  • The 'pom.xml' File
  • Spring Boot Maven Plugin
  • Create a Spring Boot Application
  • Spring MVC
  • Spring Web Modules
  • Spring MVC Components
  • DispatcherServlet
  • Template Engines
  • Spring Boot MVC Example
  • Spring MVC Mapping of Requests
  • Advanced @RequestMapping
  • Composed Request Mappings
  • Spring MVC Annotation Controllers
  • Controller Handler Method Parameters
  • Controller Handler Method Return Types
  • View Resolution
  • Spring Boot Considerations
  • Overview of Spring Boot Database Integration
  • DAO Support in Spring
  • Spring Data Access Modules
  • Spring JDBC Module
  • Spring ORM Module
  • DataAccessException
  • @Repository Annotation
  • Using DataSources
  • DAO Templates
  • DAO Templates and Callbacks
  • ORM Tool Support in Spring
  • Using Spring with JPA or Hibernate
  • Spring JPA
  • Benefits of Using Spring with ORM
  • Spring @Repository
  • Using JPA with Spring
  • Configure Spring Boot JPA EntityManagerFactory
  • Application JPA Code
  • "Classic" Spring ORM Usage
  • Spring JpaTemplate
  • Spring JpaCallback
  • JpaTemplate Convenience Features
  • Spring Boot Considerations
  • Spring Data JPA Repositories
  • Lab
  • Create Staff Interface
  • Create executive Class and non-executive Class
  • Create Command Line application - Staff Profile Module
  • Create Leave Interface
  • Create Annual Leave Class and Medical Leave Class
  • Create Web Based Solution - Staff Profile Module

Day 3

  • Spring REST Services
  • Many Flavors of Services
  • Understanding REST
  • RESTful Services
  • REST Resource Examples
  • REST vs SOAP
  • REST Services With Spring MVC
  • Spring MVC @RequestMapping with REST
  • Working With the Request Body and Response Body
  • @RestController Annotation
  • Implementing JAX-RS Services and Spring
  • JAX-RS Annotations
  • Java Clients Using RestTemplate
  • RestTemplate Methods
  • Spring Micro services
  • Evaluation of Micro Services
  • Principles Of Micro Services
  • Characteristics of Micro Services
  • Micro services Benefits
  • Relationship with SOA
  • Twelve Factor Apps
  • Micro Services use cases
  • Micro Services early adopters
  • Building micro services with boot
  • Micro Services Capability model
  • Micro Services Use case
  • Stateless Microservice with Basic Auth and CORS
  • Stateful Microservice with Form Auth, CSRF and CORS
  • Stateful Microservice with SPA Integrated
  • Spring Security
  • Securing Web Applications with Spring Security 3.0
  • Spring Security 3.0
  • Authentication and Authorization
  • Programmatic v Declarative Security
  • Getting Spring Security from Maven
  • Spring Security Configuration
  • Spring Security Configuration Example
  • Authentication Manager
  • Using Database User Authentication
  • Security Basics
  • Storing Passwords
  • Hashing Passwords (MD5 and SHA256)
  • OAuth2 Login Java Config
  • OAuth2 Client support
  • OAuth2 Security in a microservice architecture
  • Lab
  • Create REST Services
  • Create REST API for Staff to access the Staff Details
  • Create REST API for Leave Module to access the Leave Details
  • Create REST API for Leave Workflow
  • Secure the REST APIs

Day 4

  • Introduction to "Modern (ES6)" JavaScript
  • JavaScript Refresher
  • Basic language features
  • Creating variables, Functions and functional programming
  • Nesting functions
  • Creating Objects with JavaScript literal syntax and constructor functions
  • Indexed property access
  • Typeof and objects
  • Special comparisons for objects
  • Scope and Context
  • JavaScript visibility rules
  • Global variables
  • Object functions and execution
  • The this keyword in JavaScript
  • JavaScript types: Number, String, Boolean, Date
  • JavaScript == and false conditions and Triple Equals ===
  • Primitives and wrapper objects in JavaScript
  • Arrays – Ordered sequence of items
  • Key JavaScript built-in objects
  • Introduction to REACT
  • What react is and what it is not
  • React concepts
  • Component composition
  • How react works
  • How Virtual DOM works
  • How react handles data binding
  • Advantages & Limitations
  • Setting up ReactJS Development Environment
  • Using Webpack / Babel
  • Using npm & package.json file
  • Look at an ReactJS application
  • Organizing source code
  • React browser plugin
  • Creating a simple React Application
  • A simple react component with JSX template
  • Component structure
  • React render
  • Component properties and property passing
  • Props validation with data types
  • States, initialize states and update states
  • Pure components
  • Introduction to JSX
  • Components
  • HTML attributes example. Class and Id etc
  • Child Components and Namespaced components
  • JavaScript expressions in JSX like attribute, boolean or child expression
  • Forms
  • Form components example input, textarea
  • Controlled form components
  • Uncontrolled form components
  • Checkboxes and Radios
  • Select box with default selected values
  • Form validation
  • Lab
  • Develop Intranet Web Application – HR Management System
  • Use CSS to Decorate the Website
  • Use Bootstrap
  • Develop pages such as Home, About us, Dashboard
  • Develop Header components
  • Develop Footer components

Day 5

  • Component Life Cycle
  • Mounting Components
  • Updating Components
  • Setting Properties
  • Composing Components
  • Sibling Components and Key
  • Parent and Child Components
  • Props and State E. Component Life-Cycle
  • Conditional Statements in React
  • If-else in JSX
  • IIFE in JSX for complex logic
  • Event handling
  • React.js Event Handlers
  • Synthetic Events
  • Keyboard
  • Composition
  • Focus
  • Form
  • Mouse
  • Clipboard
  • Selection
  • Touch
  • Event Pooling
  • Other useful events in React
  • Sharing events across the components
  • React Styles
  • CSS and inline styles
  • Setting up the react for React bootstrap
  • Implementing the react bootstrap components
  • React Router & Navigation
  • Loading the router library
  • Router configuration
  • Passing and receiving parameters
  • React-cookie integration
  • Lab
  • Develop Staff Components
  • Develop Leave Components
  • Develop Dashboard Components
  • Develop Leave Workflow Components
  • Introduction to FLUX
  • Flux pattern
  • Flux Application Architecture
  • Rational and MVC comparison
  • Data Flow – Action, Dispatcher, Store & View
  • Redux
  • Reducer / Action / Store
  • Creating a dynamic UI in React
  • React Stateful Components
  • Keeping components stateless
  • Autobinding
  • Event Delegation
  • Unit Testing
  • Tools for Unit Testing
  • Jest & Jasmine
  • Enzyme
  • React Unit Testing
  • Testing DOM manipulations
  • Testing properties and state
  • Simulating Events
  • Shallow Rendering
  • Lab
  • Integrate Staff Components with backend
  • Integrate Leave Components with backend
  • Integrate Dashboard Components with backend
  • Integrate Leave Workflow Components

Programme scope, delivery arrangements and suitability are confirmed during enquiry.