Full-Stack Development with Spring Boot and VueJS

•

0 gostou•1,035 visualizações

SpringOne 2021 Session Title: Full-Stack Development with Spring Boot and VueJS Speaker: Dan Vega, Enteprise Java Architect at Briebug Software

Software

Full-Stack Java Development
with Spring Boot & VueJS
www.danvega.dev/spring-one-2021

• Husband & Father

• Enterprise Java Architect at Briebug

• Cleveland

• Content Creator

• Blog

• YouTube

• Course Creator
About Me

• Spring Framework

• Open Source Framework

• Java / Kotlin / Groovy

• Maven / Gradle

• What can Spring Do?

• Web Applications

• Cloud

• Microservices

• Serverless

• Event Driven

• Much More
What is Spring?

• Opinionated view of building Spring Applications

• start.spring.io

• Starter Dependencies

• Auto Con
fi
guration

• Production Ready Features

• Metrics

• Health Checks

• Externalized Con
fi
guration
What is Spring Boot?

Spring Projects
• Spring Framework

• Spring Boot

• Spring Data

• Spring Cloud

• Spring Cloud Data Flow

• Spring Security

• Spring GraphQL

• Spring Session
• Spring Integration

• Spring HATEOAS

• Spring REST Docs

• Spring Batch

• Spring AMQP

• Spring CredHub

• Spring Flo
• Spring Apache Kafka

• Spring Roo

• Spring Shell

• Spring Statemachine

• Spring Vault

• Spring Web Flow

• Spring Web Services

• JavaScript Frameworks / Libraries

• Vue / React / Angular / Svelte

• Progressive JavaScript Framework

• Open Source

• Easy to learn

• HTML / CSS / JavaScript

• Great documentation

• Great ecosystem and community
What is VueJS

Ice Cream is my agenda
• Progressive Vue

• Monolith

• Single Page Application (SPA)
Agenda

pro·gres·sive
“Happening or developing gradually or in
stages; proceeding step by step”

https://github.com/vuejs/petite-vue
Petite Vue is an alternative distribution of Vue
optimized for progressive enhancement. It
provides the same template syntax and reactivity
mental model with standard Vue. However, it is
speci
fi
cally optimized for "sprinkling" small
amount of interactions on an existing HTML page
rendered by a server framework.
• Only ~5.8kb

• Vue-compatible template syntax

• DOM-based, mutates in place

• Driven by @vue/reactivity
Petite Vue

Wikipedia
“Asoftwaresystemiscalled“monolithic”if ithasamonolithicarchitecture,
inwhichfunctionallydistinguishableaspectsareallinterwoven,rather
thancontainingarchitecturallyseparatecomponents”

• Pros

• Single Deployable JAR

• Simplicity

• Performance

• Cons

• Single Deployable JAR

• Tight Coupling
Monolith Approach

Wikipedia
“Asingle-pageapplicationisawebapplicationorwebsitethatinteractswiththeuser
bydynamicallyrewritingthecurrentwebpagewithnewdatafromthewebserver,
insteadof thedefaultmethodof awebbrowserloadingentirenewpages.”

• Pros

• 2 Deployable assets

• Louse Coupling

• Cons

• 2 Deployable assets

• Single Deployable JAR

• Perfromance *
SPA Approach

Mais conteúdo relacionado

Mais procurados

DevOps for beginnersPradeep Patel, PMP®

React Server Side Rendering with Next.jsJamie Barton 👨🏻‍💻

Containers Docker Kind Kubernetes IstioAraf Karsh Hamid

Build CICD Pipeline for Container Presentation SlidesAmazon Web Services

Introduction to DevOps | EdurekaEdureka!

Getting Started with Kubernetes VMware Tanzu

Vue.jsJadson Santos

Azure Logic AppsBizTalk360

Learning Docker from Square OneDocker, Inc.

Micro-frontendMiguel Angel Teheran Garcia

DevSecOps 101Narudom Roongsiriwong, CISSP

Introduction to GraphQLAmazon Web Services

Introduction to spring bootSantosh Kumar Kar

Document your rest api using swagger - Devoxx 2015johannes_fiala

DevOps on AWSAmazon Web Services

HelloCloud.io - Introduction to IaC & TerraformHello Cloud

Introduction to SwaggerKnoldus Inc.

파이썬 생존 안내서 (자막)Heungsub Lee

Nginx Reverse Proxy with Kafka.pptxwonyong hwang

From framework coupled code to #microservices through #DDD /by @codelytvCodelyTV

Mais procurados (20)

DevOps for beginners

React Server Side Rendering with Next.js

Containers Docker Kind Kubernetes Istio

Build CICD Pipeline for Container Presentation Slides

Introduction to DevOps | Edureka

Getting Started with Kubernetes

Vue.js

Azure Logic Apps

Learning Docker from Square One

Micro-frontend

DevSecOps 101

Introduction to GraphQL

Introduction to spring boot

Document your rest api using swagger - Devoxx 2015

DevOps on AWS

HelloCloud.io - Introduction to IaC & Terraform

Introduction to Swagger

파이썬 생존 안내서 (자막)

Nginx Reverse Proxy with Kafka.pptx

From framework coupled code to #microservices through #DDD /by @codelytv

Semelhante a Full-Stack Development with Spring Boot and VueJS

Modern Web Framework : Play frameworkSuman Adak

ASP.NET 5David Voyles

Come Sail Away With Me (you guys): Node.js MVC Web API's Using Sails.jsEric Nograles

DotNet MVC and webpack + Babel + reactChen-Tien Tsai

Using-AngularJS-with-Sitefinity.pptxkisofe

Developing Cross-Platform Web Apps with ASP.NET Core1.0EastBanc Tachnologies

Single Page Applications - Desert Code Camp 2012Adam Mokan

Single Page Application Development with backbone.js and Simple.WebChris Canal

JavaScript in Universal Windows Platform appsTimmy Kokke

Azure Functions Real World Examples Yochay Kiriaty

[Cordova] Empezando con IonicMoises Alexander Salazar Vila

Front End page speed performance improvements for DrupalAndy Kucharski

Intro to SPA using JavaScript & ASP.NETAlan Hecht

Front End page speed performance improvements for DrupalPromet Source

Why use Go for web development?Weng Wei

Agile sites @ telmore Michele Sciabarrà

Shift Remote: JS - Javascript Build Tools: Past & Beyond - Shedrack Akintayo Shift Conference

Play Framework: Intro & High-Level OverviewJosh Padnick

Bootstrapping angular js with bower grunt yeomanMakarand Bhatambarekar

Jakarta EE und Microprofile sind bei Azure zu HauseEdward Burns

Semelhante a Full-Stack Development with Spring Boot and VueJS (20)

Modern Web Framework : Play framework

ASP.NET 5

Come Sail Away With Me (you guys): Node.js MVC Web API's Using Sails.js

DotNet MVC and webpack + Babel + react

Using-AngularJS-with-Sitefinity.pptx

Developing Cross-Platform Web Apps with ASP.NET Core1.0

Single Page Applications - Desert Code Camp 2012

Single Page Application Development with backbone.js and Simple.Web

JavaScript in Universal Windows Platform apps

Azure Functions Real World Examples

[Cordova] Empezando con Ionic

Front End page speed performance improvements for Drupal

Intro to SPA using JavaScript & ASP.NET

Front End page speed performance improvements for Drupal

Why use Go for web development?

Agile sites @ telmore

Shift Remote: JS - Javascript Build Tools: Past & Beyond - Shedrack Akintayo

Play Framework: Intro & High-Level Overview

Bootstrapping angular js with bower grunt yeoman

Jakarta EE und Microprofile sind bei Azure zu Hause

Mais de VMware Tanzu

What AI Means For Your Product Strategy And What To Do About ItVMware Tanzu

Make the Right Thing the Obvious Thing at Cardinal Health 2023VMware Tanzu

Enhancing DevEx and Simplifying Operations at ScaleVMware Tanzu

Spring Update | July 2023VMware Tanzu

Platforms, Platform Engineering, & Platform as a ProductVMware Tanzu

Building Cloud Ready AppsVMware Tanzu

Spring Boot 3 And BeyondVMware Tanzu

Spring Cloud Gateway - SpringOne Tour 2023 Charles Schwab.pdfVMware Tanzu

Simplify and Scale Enterprise Apps in the Cloud | Boston 2023VMware Tanzu

Simplify and Scale Enterprise Apps in the Cloud | Seattle 2023VMware Tanzu

tanzu_developer_connect.pptxVMware Tanzu

Tanzu Virtual Developer Connect Workshop - FrenchVMware Tanzu

Tanzu Developer Connect Workshop - EnglishVMware Tanzu

Virtual Developer Connect Workshop - EnglishVMware Tanzu

Tanzu Developer Connect - FrenchVMware Tanzu

Simplify and Scale Enterprise Apps in the Cloud | Dallas 2023VMware Tanzu

SpringOne Tour: Deliver 15-Factor Applications on Kubernetes with Spring BootVMware Tanzu

SpringOne Tour: The Influential Software EngineerVMware Tanzu

SpringOne Tour: Domain-Driven Design: Theory vs PracticeVMware Tanzu

SpringOne Tour: Spring Recipes: A Collection of Common-Sense SolutionsVMware Tanzu

Mais de VMware Tanzu (20)

What AI Means For Your Product Strategy And What To Do About It

Make the Right Thing the Obvious Thing at Cardinal Health 2023

Enhancing DevEx and Simplifying Operations at Scale

Spring Update | July 2023

Platforms, Platform Engineering, & Platform as a Product

Building Cloud Ready Apps

Spring Boot 3 And Beyond

Spring Cloud Gateway - SpringOne Tour 2023 Charles Schwab.pdf

Simplify and Scale Enterprise Apps in the Cloud | Boston 2023

Simplify and Scale Enterprise Apps in the Cloud | Seattle 2023

tanzu_developer_connect.pptx

Tanzu Virtual Developer Connect Workshop - French

Tanzu Developer Connect Workshop - English

Virtual Developer Connect Workshop - English

Tanzu Developer Connect - French

Simplify and Scale Enterprise Apps in the Cloud | Dallas 2023

SpringOne Tour: Deliver 15-Factor Applications on Kubernetes with Spring Boot

SpringOne Tour: The Influential Software Engineer

SpringOne Tour: Domain-Driven Design: Theory vs Practice

SpringOne Tour: Spring Recipes: A Collection of Common-Sense Solutions

Último

CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE9953056974 Low Rate Call Girls In Saket, Delhi NCR

Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...kellynguyen01

Hand gesture recognition PROJECT PPT.pptxbodapatigopi8531

Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdfkalichargn70th171

W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...panagenda

call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️Delhi Call girls

CALL ON ➥8923113531 🔝Call Girls Badshah Nagar Lucknow best Female serviceanilsa9823

Reassessing the Bedrock of Clinical Function Models: An Examination of Large ...harshavardhanraghave

The Ultimate Test Automation Guide_ Best Practices and Tips.pdfkalichargn70th171

Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...MyIntelliSource, Inc.

TECUNIQUE: Success Stories: IT Service providermohitmore19

Right Money Management App For Your Financial GoalsJhone kinadey

How To Use Server-Side Rendering with Nuxt.jsAndolasoft Inc

5 Signs You Need a Fashion PLM Software.pdfWave PLM

A Secure and Reliable Document Management System is Essential.docxComplianceQuest1

The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...ICS

SyndBuddy AI 2k Review 2024: Revolutionizing Content Syndication with AIABDERRAOUF MEHENNI

How To Troubleshoot Collaboration Apps for the Modern Connected WorkerThousandEyes

Software Quality Assurance Interview QuestionsArshad QA

Unveiling the Tech Salsa of LAMs with Janus in Real-Time ApplicationsAlberto González Trastoy

Full-Stack Development with Spring Boot and VueJS

1. Full-Stack Java Development with Spring Boot & VueJS www.danvega.dev/spring-one-2021

2. • Husband & Father • Enterprise Java Architect at Briebug • Cleveland • Content Creator • Blog • YouTube • Course Creator About Me

3. • Husband & Father • Enterprise Java Architect at Briebug • Cleveland • Content Creator • Blog • YouTube • Course Creator About Me

4. • Husband & Father • Enterprise Java Architect at Briebug • Cleveland • Content Creator • Blog • YouTube • Course Creator About Me

5. • Husband & Father • Enterprise Java Architect at Briebug • Cleveland • Content Creator • Blog • YouTube • Course Creator About Me

6. Spring Boot + VueJS

8. • Spring Framework • Open Source Framework • Java / Kotlin / Groovy • Maven / Gradle • What can Spring Do? • Web Applications • Cloud • Microservices • Serverless • Event Driven • Much More What is Spring?

9. • Opinionated view of building Spring Applications • start.spring.io • Starter Dependencies • Auto Con fi guration • Production Ready Features • Metrics • Health Checks • Externalized Con fi guration What is Spring Boot?

10. Spring Projects • Spring Framework • Spring Boot • Spring Data • Spring Cloud • Spring Cloud Data Flow • Spring Security • Spring GraphQL • Spring Session • Spring Integration • Spring HATEOAS • Spring REST Docs • Spring Batch • Spring AMQP • Spring CredHub • Spring Flo • Spring Apache Kafka • Spring Roo • Spring Shell • Spring Statemachine • Spring Vault • Spring Web Flow • Spring Web Services

11.

12. • JavaScript Frameworks / Libraries • Vue / React / Angular / Svelte • Progressive JavaScript Framework • Open Source • Easy to learn • HTML / CSS / JavaScript • Great documentation • Great ecosystem and community What is VueJS

13. Ice Cream is my agenda • Progressive Vue • Monolith • Single Page Application (SPA) Agenda

14. Progressive Vue

15. pro·gres·sive “Happening or developing gradually or in stages; proceeding step by step”

16.

17. https://github.com/vuejs/petite-vue Petite Vue is an alternative distribution of Vue optimized for progressive enhancement. It provides the same template syntax and reactivity mental model with standard Vue. However, it is speci fi cally optimized for "sprinkling" small amount of interactions on an existing HTML page rendered by a server framework. • Only ~5.8kb • Vue-compatible template syntax • DOM-based, mutates in place • Driven by @vue/reactivity Petite Vue

18. Monolithic Application

19. Wikipedia “Asoftwaresystemiscalled“monolithic”if ithasamonolithicarchitecture, inwhichfunctionallydistinguishableaspectsareallinterwoven,rather thancontainingarchitecturallyseparatecomponents”

20. • Pros • Single Deployable JAR • Simplicity • Performance • Cons • Single Deployable JAR • Tight Coupling Monolith Approach

21.

22.

23.

24. Single Page Applications (SPA)

25. Wikipedia “Asingle-pageapplicationisawebapplicationorwebsitethatinteractswiththeuser bydynamicallyrewritingthecurrentwebpagewithnewdatafromthewebserver, insteadof thedefaultmethodof awebbrowserloadingentirenewpages.”

26. • Pros • 2 Deployable assets • Louse Coupling • Cons • 2 Deployable assets • Single Deployable JAR • Perfromance * SPA Approach

27.

28. Questions?