Bridging the Gap: Full-Stack Development Without the Headaches

Working on web projects often means dealing with two separate environments —one for the backend and another for the frontend —each with its own ecosystem. Developers frequently encounter issues when dealing with their counterparts' ecosystems, creating a needless wall between front-end and back-end developers. You have to use unfamiliar tools, follow API changes, create mocks, and have a hard time creating e2e tests. Overall, this makes development unnecessarily frustrating and a time-consuming process.

In this session, I'll discuss your approach to these typical problems and show you how Quarkus makes full-stack development easier. Without having to deal with typical npm or front-end setup issues, Quarkus allows you to develop applications with dependable Java back-end services and javascript front ends. You can concentrate on more important things, like building your app!

Using a Java backend powered by Quarkus and a JavaScript front end, we will learn how to build a full-stack application.

Transcript

1. Bridging the Gap: Full-Stack Development Without the Headaches Loïc Magnette
8. Loïc Magnette LoMagnette lmagnette
14. The frontend rainbow
15. The frontend rainbow
16. Server-side rendering • Qute • Renarde • JSF The frontend rainbow
17. Client-side rendering • Quinoa • Web bundler The frontend rainbow
20. QUINOA
21. Q UI NO A
22. Quarkus UI NO hAssle
23. Source: https://docs.quarkiverse.io/
24. Source: https://docs.quarkiverse.io/
25. Demo
27. Awesome Java Backend pom.xml resources Web bundler
28. Awesome Java Backend pom.xml resources Dependen cies Web bundler
29. Awesome Java Backend pom.xml resources Dependen cies webjars mvnpm Web bundler
30. webjars
31. webjars
32. webjars
33. webjars
34. webjars - Client-side deps in JVM-Based environment - Use Java build tools - Resolve transitive deps - Deployed on Maven Central
35. - Facade npm registry - Only stable dependencies - Proxy through npm registry - Filtered content (size) - Cleaner naming mvnpm
36. Awesome Java Backend pom.xml resources Dépendan ces webjars mvnpm Web bundler
37. Awesome Java Backend pom.xml resources src/main/j ava Web bundler
38. Awesome Java Backend pom.xml resources src/main/res ources Web bundler
39. Awesome Java Backend pom.xml resources src/main/resources - web/app - some.js - other.js - styles.css - web/index.html Web bundler
40. Awesome Java Backend pom.xml resources src/main/resources - web/app - some.js - other.js - styles.css - web/index.html Web bundler src/main/j ava Dépendan ces webjars mvnpm
41. Awesome Java Backend pom.xml ressources > js, jsx, ts, tsx, css > Treeshaking > Minification > Source maps Web bundler esbuild Web bundler
42. /api/* /static/bundle > some.js > some.js.map > some.css > some.css.map / Awesome Java Backend pom.xml ressources Web bundler
43. Demo
46. Developer Experience Easy integration Production ready Large support
49. SLIDES www.oniryx.be LoMagnette lmagnette