A Java Developer's Guide to Navigating the Frontend Landscape

Summary

In this video, we delve into the world of frontend development specifically tailored for Java developers. The presenter offers a beginner-friendly overview, providing up-to-date options for integrating frontend capabilities into Java projects. From utilizing Java frameworks and tools like Vaadin for UI without deep HTML/CSS skills, to exploring package managers and modern JavaScript frameworks for dynamic UIs, the session is packed with insights. Whether integrating standalone deployments or crafting full-stack solutions, this guide equips Java developers to effectively navigate the frontend landscape.

Highlights

• Java developers have several options such as web application frameworks (Spring MVC, Micronaut) and Java template engines (Thymeleaf, JTE) to support front-end integration. 🔧
• Component-based UI frameworks like Vaadin allow writing Java code to construct UIs, bypassing the need for extensive HTML/CSS/JS skills, which is beneficial for backend-centric teams. 👨‍💻
• JavaScript package managers (NPM, PNPM) and tools like Vite assist in managing dependencies and setting up efficient build environments for frontend projects. 📦
• HTMX empowers developers to enhance web projects with dynamic aspects without deep JavaScript diving, leveraging familiar Java backend capabilities. ⚙️
• Whether opting for a standalone or integrated deployment strategy, understanding the pros and cons helps in making informed architectural decisions for Java applications. 🔄

Key Takeaways

• Frontend development can be daunting with numerous tools available, but understanding the ecosystem simplifies the choices for Java developers. 🎨
• Java templates such as Thymeleaf and JTE offer strong solutions for integrating frontend elements in Java applications. 🏗️
• Vaadin is great for Java developers to build UIs without needing profound HTML/CSS/JavaScript skills. Perfect for data-centric applications. 📊
• JavaScript frameworks like React, Angular, and Vue offer robust solutions for building dynamic, interactive applications, especially when Java is used for the backend. 📈
• HTMX is a versatile tool for adding dynamic capabilities without extensive JavaScript knowledge, enhancing traditional server-side applications. 🚀

Overview

Frontend development presents its challenges, especially for Java developers who find themselves venturing into a multitude of tools and frameworks. This guide serves as a roadmap for navigating this complex landscape, offering a high-level introduction to integrating frontend elements into Java development projects. By leveraging Java's robust backend capabilities alongside a variety of frontend options, developers can enhance their applications and keep up with ever-evolving technology trends.

Included in the discussion are powerful Java frameworks like Spring MVC, and template engines such as Thymeleaf and JTE, which provide the backbone for integrating dynamic HTML content. For those hesitant about diving deep into HTML/CSS, Vaadin is highlighted as a robust solution, providing a rich set of components to build UIs within the comfort of Java code. The session also covers JavaScript advancements, essential package managers, and innovative tools like Vite, which streamline frontend project setups.

Additionally, the video delves into HTMX, a tool that modernizes how dynamic capabilities can be added to web applications, eliminating the need for extensive JavaScript knowledge. The session wraps up with a comparison between standalone and integrated deployments, guiding developers on strategic decision-making based on their project needs. Overall, the session prepares Java developers to effectively blend frontend functionalities with their backend expertise.

Chapters

• 00:00 - 05:00: Introduction and Agenda Overview The 'Introduction and Agenda Overview' chapter begins with the presenter raising a relatable question about the complexity and overwhelming number of projects in the world of front-end development, specifically targeting Java developers who need to build a frontend. The speaker assures the audience that the session is beginner-friendly and aims to introduce various options available for frontend development without delving deeply into any specific technology. The focus is on providing up-to-date choices for integrating frontend capabilities.
• 05:00 - 10:00: Personal Background and Motivation The chapter titled 'Personal Background and Motivation' provides insights into the speaker's journey into programming, highlighting the various reasons people, including possibly the speaker, pursue a career in this field. It introduces a GitHub repository that contains code examples that will be discussed, emphasizing the practical coding aspects. The speaker notes that while live coding won't be performed, the repository serves as a comprehensive resource for the day's topics. The motivation for programming could be driven by the industry's lucrative nature or personal interests.
• 10:00 - 20:00: Exploring Java Frameworks for Frontend Development In this chapter, the focus is on discovering and exploring Java frameworks that can be employed for frontend development. The speaker expresses a personal philosophy: the importance of finding a passion early on and committing to it to achieve success, especially within the tech industry. For the speaker, this passion is web development, an area they have long been involved with. Despite not always being the best at it, they find excitement and satisfaction in creating web pages and sharing them online, reminiscing about the early days when uploading via FTP was a major accomplishment. The chapter aims to draw a parallel between this passion for web development and the utilization of Java frameworks to enhance frontend capabilities.
• 20:00 - 30:00: HTML, CSS, and JavaScript Tools The chapter discusses the disconnect Java developers often experience because their work doesn't result in visible outputs that can be easily shared with non-developers, unlike web development which produces visible and shareable results. The speaker reflects on their long-standing interest in web development, highlighting how the field has evolved from the early days when tools like Front Page and Dreamweaver were used for creating web pages.
• 30:00 - 40:00: JavaScript Frameworks Overview The chapter discusses the speaker's journey in learning to code, particularly in building front-end applications or websites. The speaker reflects on how they used to accept their code as good even though it might not have been the highest quality. They mention the challenge of making websites work with Internet Explorer 6, which was a common issue for developers of the time. Despite not being naturally gifted in design or UI/UX, the speaker expresses a strong desire to improve in these areas, indicating a motivation driven by personal interest and the challenges faced in the field.
• 40:00 - 45:00: Choosing the Right Tool for Your Project The chapter titled 'Choosing the Right Tool for Your Project' focuses on improving web development skills, emphasizing the importance of practice through practical projects. The speaker shares personal experience, suggesting that building a personal website or blog is a fun and effective way to learn front-end development through hands-on experience. The approach involves continuous learning and adaptation by working on different projects, which enhances one's ability and familiarity with various development tools and techniques.
• 45:00 - 46:00: Conclusion and Contact Information The conclusion and contact information chapter reflects on the author's beginnings in the blogging community, starting back in 2005. They recount their first blog, which despite having a poor logo and website design, allowed them to delve into open source projects, build skills, and engage with the community. Over the years, this involvement has grown significantly, with the author now having written over a thousand blog posts. The reflection emphasizes the fun and value found in these activities.

A Java Developer's Guide to Navigating the Frontend Landscape Transcription

• 00:00 - 00:30 All right, good afternoon everyone. I want to start out with a little question. How many people think the world of front-end development can be confusing and has a little bit too many projects to keep up with? All right, you're in the right room then. Um, but this is going to be really a beginner friendly uh kind of introduction to you're a Java developer. You need to build a frontend. What are your options? We're not going to go too deep into any of them. I'm going to give you kind of some up-to-date options on how you can
• 00:30 - 01:00 start to build some of these frontends. Uh, I have a repo here, github.comdanvega, uh, java-developer-frontend landscape. This has all the code we're going to go to through today. We're not going to like live code some stuff, but these are all like the repo or all the code that we're going to go through. And there's some different examples based on the different things that we're going to get into today. So, I want to start here. We all kind of get into programming for different reasons. Uh maybe it's a lucrative career. Uh maybe uh it's just
• 01:00 - 01:30 something that you're really passionate about. Whatever it is, uh for me, I kind of encourage people to find something early on that you're passionate about and kind of stick with it. And if you can, I think in this industry, uh I consider that a really big win. For me, it's always been building for the web. It's not something I've ever been really great at, but the idea of like, hey, I can take this thing and back in my day, FTP it up to the web and have it out there for everyone to see was like really cool. Like, wow, I made this
• 01:30 - 02:00 thing. Everybody can see it. And I think as Java developers, we kind of get left behind a lot of times, right? Because you can't go show your spouse or your mom this cool API that you built because there's nothing really to see there, right? So, for me, it's always kind of been building for the web. I'm like really been interested in this. As I mentioned though, I've been doing this for a little while. So, it's a it was a little bit different when I got started. And so, when I got started, I used tools like Front Page and Dreamweaver and I'd drag something on there and then I'd go
• 02:00 - 02:30 look at the code and see what code it wrote and thought that that was good code, which was probably a mistake. You know, it wasn't the greatest code ever, but that's how I kind of learned and that's how I got into kind of uh building out applications or websites for the front end. And then ultimately I would go and make sure it worked in IIEE6, which if you're around then a whole lot of fun to do, right? Um, so again, I said this was never anything I was ever really good at. I was never a designer. I was never really really great at kind of UI UX, but it's something that I wanted to get better at. Something that kind of drove me like
• 02:30 - 03:00 I I enjoy building for the web. How do I get better at this? And one of the ways you get better at this is just like anything else, putting in the reps, right? So, you got to like be able to um do some different things and learn some some of the ropes of the front-end development. So, I would find ways to to get better at this things that I could build out. One of those things early on for me was a personal website, a blog, something that I could work on and kind of tinker with and have some fun with. I enjoyed kind of learning stuff and then
• 03:00 - 03:30 teaching it back to the community. So, this was my very first blog back in like 200, what do I have here? 2005. So, this this was around for a while. Um, I've written like a thousand plus blog posts since then, but this is kind of what it started out as, a terrible logo and a terrible website, but it gave me the ability to get involved in open source, download open source projects, build something for myself. Uh, and and it was a lot of fun. And it's had its over the years. I kind of got a little
• 03:30 - 04:00 better. There's like a Flickr stream in here, I think, if anybody remembers Flickr. Um, kind of progressed from there. This one's starting to look a little bit better. And I would take on things like this, like, oh, I saw this website that had this little curve. And that may seem, if you know the world of front-end development, that may seem easy to, but for me, it was like, oh, how do you do that? So, I would just go and and start to kind of build out these visual elements. And then here's kind of the latest iteration of my website. So, I guess the kind of point of this is like this is like anything else. If you
• 04:00 - 04:30 want to get better at it, got to do it a little bit more often. Don't just let the robots write everything for you. go through fail and and learn how to build some of this stuff. So, uh we saw the iterations of my website and I asked the question, does a front end change a lot? Yes, it does, but so do we. So, a little bit about me. I am from Cleveland, Ohio. I'm a Java champion. I've been doing this for a long while. So, I put that number up there. I hate putting that number up there, but uh I've worn many hats in this industry. The current one that I'm wearing is a Spring developer advocate. Uh I was a
• 04:30 - 05:00 advocate for spring long before somebody was paying me to do so. One of the things I like to share is you don't need permission to advocate for the things that you're passionate about. So for me that's always been kind of Java in spring. Uh go out there and do it. Give a talk. Uh write a blog post. Do a video. Give a lunch and learn at your work. You never know where those things will kind of lead to you. Uh I'm a soon to be author. There is a book coming out fundamentals of software engineering. If you're on the O'Reilly platform, there's
• 05:00 - 05:30 an early release of that. We're adding chapters all the time. Should be out later this year. So on my agenda today, again, this is a high level. I'm not going to go deep, but hey, I am a Java developer. I need to build a front end. What are my options? So we'll look at some Java framework options. So if you just want to use your uh utilize your existing Java skills, what are your options there? Uh if you want to build out some HTML, CSS, and JavaScript, what are some of the kind of tools in that space that you should pay attention to? because again there are so many things going on in that space. I'm going to give you a
• 05:30 - 06:00 full few tools that you can kind of focus in on. We'll talk about JavaScript frameworks and then the big question is okay well you give me a bunch of options like how do I choose which one uh for my next project. All right. Um so starting with Java frameworks uh you have existing Java skills. What can you use to kind of build out some front-end applications? So first off we have uh web application frameworks. So things like Spring MVC,
• 06:00 - 06:30 there's Micronaut, Caucus, Struts. Uh we have these web application frameworks. We can build out some frontends for our applications using these. And the way that we do that is by using something like a Java template engine. And this is a library to generate dynamic HTML by using some static HTML and putting in some data from our applications. This is really the view component of a model view controller. So, um there are some different template engines here. Time
• 06:30 - 07:00 leaf, JTE I've been a big fan of lately. We'll talk more about that. Um there's Mustache, Freearker, Groovy templates. There's some really great spaces in the in the Java world. And again, these are Java templates, not specific to those frameworks I mentioned before, but most of them work with those different frameworks. So, we have Time Leaf. Time Leaf has has been around a while. One of the things I love about Time Leaf is uh it it really they're they're called natural templating. And so what that means is that you can give it to a
• 07:00 - 07:30 designer. They can kind of design out these templates for you and as we put um data in them like they'll still compile and run, right? So so designers can work with them and then we can kind of bring them over into our Java applications. Uh JTE is one that I've been using a lot more lately. Uh Java template engine. uh we'll see some examples of that. What I really love about that is when I get thrown into say a Java template engine, there is uh say an import for a specific type like a
• 07:30 - 08:00 user type and when I look at the code I know like okay that all this code that is accessing that data that is part of that user type. When I'm thrown into other template engines I'm I'm constantly going like where is this data coming from and like what types are these? uh this kind of gives you some type safety and some other uh pretty cool features out of there. So again, you can use this with any of those kind of frameworks I talked about. I am a Spring developer advocate, so I may mention Spring a couple times today, but
• 08:00 - 08:30 um if you go to the Spring initializer and go to like start.spring.io, you can go ahead and type in template, and those are the templates available. You pick your template and now basically what we're going to do is we're going to send some data down to these templates that mix the HTML in the data. So in Spring here's an example of that. I have a controller that is going to return this index template and all I'm saying is hey I'm going to get a list of sessions and we're going to put that in an attribute that sends that down to that template
• 08:30 - 09:00 and now within that template I have access to that data. So that's an example of that. And then in our template itself, we are basically going again all the different template engines use different syntax for doing this. But in this case in that for loop, we're just iterating over the list of sessions and we're now able to kind of display those in a template. And we'll actually run an example of this uh in a bit. A really good example of this is
• 09:00 - 09:30 we've seen it mentioned this morning was the spring pet clinic. Uh this is a project over on the spring projects page uh that has a lot of time leaf templates in it. So if you're looking at like a full-fledged what is a spring MVC with some template engine example look like that's a really good project to do. Um okay so uh how about some Java frameworks? Some component-based UI frameworks. Uh you if you haven't heard of Voden before, Voden's a really good
• 09:30 - 10:00 example of this. you can build UIs in Java uh without having to have HTML, CSS, and JavaScript skills. So, this is really nice because you get to use a an ex like a a familiar environment. So, I'm in a Java class. I use all these different components. If I want to construct a table, there's a component for that. If I want to build a form layout, there's a component for that. And you're writing Java code. So what I often tell people is like hey if you have a bunch of engineers who have existing Java skills and you want to
• 10:00 - 10:30 build some like backend data access application have them use something like VODE because now we don't have to like reskill everybody on how to build front-end applications right and so what that does allows you to write Java and produces like the HTML CSS and JavaScript for you and there's some other examples uh of that so I'll dive a little bit deeper into VANE if you want to find out more you can go voden.com and um I'm a big fan of this company and again I I I say that uh this
• 10:30 - 11:00 is great for building kind of datacentric uh business applications but I've seen it used for for all types of use cases. What I love about this is you get a rich set of components that build really good-looking UIs. So if you're not somebody who wants to spend all day kind of tweaking UIs and getting these components together, uh this is great because it has like everything out of the box. um build UIs in Java runs on the JVM. The client library renders the UI.
• 11:00 - 11:30 Again, rich component library. I like that you can customize these uh with different theming options. And I really like that accessibility was kind of thought from the beginning. Uh so everything all these components that come out of here are insured uh for good accessibility with technologies like screen readers. So if you go to the website, you'll see like all the different components that they have. Uh all the things you you would expect from a component library. So I have basic UI components like a text field or buttons. I have different
• 11:30 - 12:00 ways to lay things out in an applications. I have different ways to display data. So we'll look at like a table example today. And then different like navigation components. If you want to get started with VA, a few ways to get started. You can go, if you go to the VA website, there's a get started button that will take you over to this and this is start.boden.com. You can go in and use the getting started tutorial or download a hello world project. But that start a
• 12:00 - 12:30 project uh actually takes you into a visual designer. So going back to my days of like front page in Dreamweaver, this allows you to like drag things in there and kind of build out your UIs, which is really nice. So big fan of Odin. Um, and then if you're on the spring side, if you're building a Spring app, there is actually a starter for Voden. So you can say, "Hey, I'm building a web app and I'm going to use Vaoden." And you can go ahead and start your app from there. Okay. So frameworks, um, UI
• 12:30 - 13:00 component libraries, hybrid frameworks, and application generators. So there's a couple here. Um, Jipster, uh, one that I've kind of been involved in with, uh, for a while now. Um, Jpster for me was like I I used to like download JHipster kind of this full baked uh solution. Uh, it's got a front end, a backend, it kind of has all these different components. And I used to like put these applications together and kind of read through the source code and go, "Oh, I see how these things kind of tie together, right?" And so you can combine
• 13:00 - 13:30 like a Spring Boot backend with a front end like Angular, React, or Vue, and they're all kind of packaged into one application. I'll show you an example of what it does, but uh you can kind of like pick all the different components of your application. You get a lot of other things other than just kind of a bootstrapped application. You can say, "Hey, I I want this type of authentication. I'm going to talk to this type of database. I'm going to use this type of cache." Uh really a full stack application with a single command. So, if that's kind of what you're
• 13:30 - 14:00 looking for, that's a great option. The creators of Voden also have another project called Hilla which is similar to what J hipster does. So if you go over to Voden the first thing that we looked at is called Voden flow that is that using that component library to write those Java um UIs. Hilla is similar to what J hipster does. If you want to learn about JHipster, Jhipster.te. Um this is for Java hipster. I guess that that's the
• 14:00 - 14:30 glasses. I only hipsters wear glasses, I guess. Um, but uh again, building full stack Java applications, a uh generator to create a Spring Boot app paired with the front end, you get all of these kind of features out of the box. You don't need to include them all, but I'll show you in the think the next couple of screens that there are options to do all of these things. So, when you go to start.jhips.te, you're given the option to create a new application. you can sign in uh if you've had some other ones
• 14:30 - 15:00 before and then you go through and you pick all these options. So, as I said before, what type of authentication would you like to use? I'm going to use GWT authentication. What type of database? How about production? Uh do you want to use a a cache? Do you want to use a second level cache with like hibernate? And then, hey, what are all the options as far as the client goes? So if you're building a full stack application, uh this is a a really nice option to kind of put all of that together. And like I said, for me, it's
• 15:00 - 15:30 always been a really good learning tool. Like let me look at the code that was generated from this and see how these like pieces all kind of fit together. All right. And last thing in Java is kind of the desktop framework. So I know Java FX has had a couple sessions already today. I I used to have swing on here as an option, but I just took it off because like don't don't look at swing anymore. Although I I used to work for a coding boot camp and I'm still surprised that like universities and boot camps teach Swing. I don't
• 15:30 - 16:00 understand it. If you're going to build a like a desktop application in Java these days, uh you should take you take you should take a look at Java FX. Okay, so that's my kind of Java uh roundup. Let's take a look at a couple demos here. So, I'm going to flip that. Let me [Music] zoom. Let's go one
• 16:00 - 16:30 more. All right. Um, so this application just has some data in JSON format. So, here are all the sessions from uh Java 1. And what I want to do is I have this repository that basically reads that JSON file. And so what I do is I have a controller and in spring I mark the controller with the act controller annotation and that says hey we're going to return whatever template we're kind of using there. In this case we're using this index template. And again as I said
• 16:30 - 17:00 before we're we're making a variable available called sessions. And that is going to be the list of all the sessions from Java 1. And we're just putting it into the model. So that model is now available in the template. So when I write a template um as I said before uh I have the ability to kind of declare this type. So this is a list of session called sessions. And now my template I can just use this uh syntax to kind of iterate over oh that doesn't look good
• 17:00 - 17:30 to iterate over that. So vars s in sessions and then I display the title and I display the speakers. And then we're doing a little uh type checking or checking on there to see if it's a workshop. In this case, there are no workshops, so it won't display those. But if I run this application and then basically go to localhost880, this is what we're given. So again, this is in a single Java application. I'm using my Java skills. I'm using something like an MVC framework. I have to like write out
• 17:30 - 18:00 the HTML, the CSS, and the JavaScript. Um, but I can kind of take that data, plug it into a template and display it out. This is kind of traditional server side generated code, right? We we have to generate that entire uh HTML before we kind of send it back to the client. So that's one example. I want to look at a va example as well. let's say button and again I have that
• 18:00 - 18:30 similar session data in here. Uh this is uh in our case a spring app but again voden kind of works outside of spring as well. Uh and I have just a normal application here but we have this new class called a session view and the session view starts with a at route annotation. And the route just says like, hey, if I go to the root, this is
• 18:30 - 19:00 the thing that's going to be displayed. If I wanted to change this route to slash sessions, you'd have to go to localhost880 sessions and this is the view that's going to be displayed. So the route sets that up and then we create this class that extends one of the layouts. So remember going back to uh VAN has all these components. Check out the website, look at the different layouts it has. In this case, this is a vertical layout. I just want to put everything into a vertical layout. You have different layouts to where you can kind of set these things up. And so what
• 19:00 - 19:30 I'm doing is, hey, set this as full. Set this as how I'm going to align things. And now I start writing Java code to add things to the screen instead of HTML, CSS, and JavaScript. I'm creating a new heading one. Here's the text. I'm creating a grid. And again, these are components that are part of the component library. to get familiar with using these, you're going to go to the documentation, find the component you want to use, and they have a bunch of examples in there of how to use it. So,
• 19:30 - 20:00 here I'm creating a new grid. I'm going to get those sessions the same way I would in the previous uh example. I'm going to add those to the grid. And then I create another layout to kind of add to add the grid to that and then add that to the container. So if we go ahead and run this again, we set that route. So we should be able to go to localhost880, you'll see this kind of change a little bit, but again that table and I don't think I've done
• 20:00 - 20:30 anything special here, but they have options to do like zebra striping or column heading like however you want to kind of lay out this table. Now it's a component in voden. You don't have to figure that out. There's all kinds of options on those components for you. So I didn't have to do anything to kind of get this to work like that. All right. Any questions on Java so far? Nope. All right. I'm going to stop
• 20:30 - 21:00 this. Come back here. Okay. Next, we go into the world of HTML, CSS, and JavaScript. So I want to start here um taking a look at some of the tools in this space uh like package managers, build tools and runtimes. So if you're not familiar with this space, a package manager is really a system that will manage your project dependencies similar to how we use Maven
• 21:00 - 21:30 or Gradle on the Java side to kind of manage dependencies. Package managers do this on the front end. Um there's some very popular ones out there. I'm sure you've heard of something like npm, but there are some other ones that you can take a look at as well. Um, everybody knows the joke about npm. Actually, I tried it on the conference Wi-Fi here, uh, and I had a problem. So, if you write you run like npm install, you download the entire internet, right? Um, that's that's kind of the joke with npm. PNPM came along and said, okay, let's
• 21:30 - 22:00 just have a single place to store all of our all of our node modules instead of doing that in every single project. So if you want some better performance, take a look at something like PNPM. Um and then there's yarn. Uh JSR came from um similar to how Typescript is a superset to JavaScript. Um JSR is really kind of a superset to npm. Uh came from Ryan Doll, the creator of Dino and Node. So uh the big one again, Node
• 22:00 - 22:30 package manager, the large world's largest software registry. Um, npm really consists of three components. It has the website, so you can go to npm uh and try to find uh different packages, set up profiles, etc. The CLI, so when you're on the command line and you want to run npm something, uh that is the CLI. And then there's a registry for all of the information surrounding it. So
• 22:30 - 23:00 that's npm. Now to get npm installed or to get node installed uh basically to publish packages to and from that npm registry you have to have nodejs installed and npm and you can do this by heading over to the node website. Uh but I always kind of point people to something called nvm. So this is a node version manager similar to how we have SDK man for installing different dependencies in our world. uh nvm allows
• 23:00 - 23:30 you to install different versions of nodes so you can quickly switch between them. So if you're going to install node use something like nvm you have different because different projects require different versions the same way that we use maven and gradal right um once you get once you have nvm you can install different versions and then you can run something like node-v or mpm-v to find out which version you're on. Um, ES modules were introduced in uh
• 23:30 - 24:00 2015 and ES6 and this was JavaScript's way of really kind of modularizing programming. They let developers split code um and into reusable files and that's where if you're in a JavaScript file and you say import something or export something that was ES modules before ES modules though we had to rely on something like bundling. So, uh, Webpack, rollup, parcel, uh, would modularize all these for different browsers. As applications got really
• 24:00 - 24:30 big, this became a big problem because as a developer, as if I wanted to start up like a local development environment, this was a really slow process. And so, we needed a little bit of a way to kind of fix this. Um, enter ES Build. This was a a really good tool written in Go. Uh, it's extremely fast. A bundler delivers bundles in uh 39 uh or 0.39 seconds for the same workload making it
• 24:30 - 25:00 10 to 100 times faster than other build tools in the system. So ESB build came around and uh Evan Yu who started Vue started this project called VIT and uh yes it was started by the creator of Vue but it's not just for Vue. It's a really great uh tool for front-end um development environments, for building, for bundling. Uh if you haven't had a chance to check it out and you're on the front end, this is a really good uh tool
• 25:00 - 25:30 and we're going to see an example of this today again for building just vanilla JS projects. Uh if you're building something like React or Angular or Vue, uh this is a really great great tool for the front end. Uh, JavaScript is not just for browsers, right? It can run in other environments. You've likely heard of Node, uh, popular runtime for serverside JavaScript, but there are newer run times to explore. Uh, so Dino, if you want to do some
• 25:30 - 26:00 shuffling around of letters here, Dino was created by Ryan Dah who created Node and kind of wanted to start fresh and take everything you learned from Node and where it kind of fell short and start fresh. So Dino is on like 2 something. Um, Dino is another runtime. And then there's also Bun, which I haven't used, but I hear really good things about. Um, and bun is like an all-in-one toolkit acting as like a runtime, a package manager, a build
• 26:00 - 26:30 tool, etc. So, it has a whole bunch of like really good features built in. So, those are some tools to like pay attention to in the front-end space. I also want to talk about HTMX. Um, and this is a really good alternative to like, hey, I want to add some dynamic capabilities to my application, but don't I don't want to write JavaScript. Don't make me write any JavaScript today. Right? I I like to think of it as kind of like the new
• 26:30 - 27:00 jQuery. So, if you've been around a while, jQuery came out and goes, "Oh, yes, I can add these cool features to my website without having to write all of that code that I don't understand." So um but uh just kind of going back to the problem that HTMX is trying to solve again when I when I started writing code we we followed a single pattern right pick a serverside technology primarily according to your programming language um within that there's a dozen frameworks that exist for something like MVC and then you add a template engine
• 27:00 - 27:30 to kind of enrich HTML something we just looked at before right the big consequence to this is that every time I need to get a new page if you will that is a round trip to the server. Give me the uh slash products page that is hey go to the server get the entire HTML send that back to the browser. So every time we need dynamic data we're doing full round trips to the browser and as I mentioned along came something like jQuery and it solved this. This was kind
• 27:30 - 28:00 of web 2.0 know, right? And it gave us like things like Ajax requests and ways to kind of do some DOM manip manipulation without um having to like do this traditional uh approach. So, HTMX offers really kind of a new approach to front-end development, especially for Java developers looking to simplify their web web projects. It's really lightweight, so very small, dependency free. Um, if you're comparing
• 28:00 - 28:30 it to something like a React application, could be something like 70% reduced code. Really depends on what you're trying to build. But there are some really great features of uh, HTMX. The other thing I like to point out is while it's nice that we can just start to add some of these dynamic capabilities to our applications, it's not just for little things like you can build some pretty complicated applications using HTMX. Um, and there
• 28:30 - 29:00 there are some decisions to make like should I use HTMX or some type of SPA framework and we can get into those at a different time. But uh my point here is that don't just think because we say we can add some small dynamic capabilities that it's not capable of building some really good uh fullfeatured applications. So how does it work? We have these attributes. So we're going to attach attributes to our HTML elements.
• 29:00 - 29:30 So in this case I have a button and I'm attaching an attribute called hx post. And what this says is, hey, when you go ahead and click this button, we are going to send a post to the server to an endpoint called clicked, right? And the way that we're triggering this is a click because I could have different things that trigger this post. And what we're going to do is we're going to ask the server for some content. In this case, it's just going to be partial HTML. It's not going to be a full round
• 29:30 - 30:00 trip getting the entire page. Uh you could think of it like, hey, I want to update this little island on a page or when somebody clicks add to cart, I want to update the number of items in a cart, right? I don't need a whole page refresh to do that. And the target and the swap will really kind of control like what is what is brought back and where it's uh swapped out. So here I'm saying, hey, the parent div is what I want to target. That's the thing I'm replacing. And then
• 30:00 - 30:30 when you swap things out, you can do it by like outer HTML, inner HTML, a whole bunch of different attributes. So that's kind of one use case and that's really kind of what got me started was like, hey, I want to send in a request to the back end and just update this little island and I don't need to do like a full page reload. If you are on uh if you are in the Spring, there was a new feature added to Spring Framework 6.2 which allows for multiple fragments. And this becomes important because like
• 30:30 - 31:00 say I needed to update something here and then maybe update a sidebar. I wanted like return multiple fragments back to this. There is support for that. Now um so you can do this in spring. So if you wanted to you can go to start.spring.io pull in the htmx library and that will give you a nice bootstrap project. But again htmx we can use in any of the frameworks that that I've been talking about today. And then there are some really good resources uh in the Spring world for
• 31:00 - 31:30 dealing with this. All right, so I want to show off uh a couple of the things we talked about in the HTML, CSS, and JavaScript world. All right, let's start here. So, um if you're not aware again, we have that package manager npm. If we wanted to, we could do like an npm init project folder. And this will create a package.json. Think of this kind of like
• 31:30 - 32:00 your Grado build or your Maven Palm file. Um that that says here are the things that I need to include in my project. What you can also do is use uh templates. So I don't want to just create a blank one. I want to use one of these like template templates out there. I mentioned Vit before. Vit has a template for this. So what I can do is I can say npm create vit at latest and it's going to drop me in here and say okay let's create a new front-end
• 32:00 - 32:30 project for you. So I'm going to give this a name. Uh did I already call it let's call this Java one? So I'm going to give it a name and then you can pick your framework. Again I said this wasn't just for Vue. If I wanted to create just a vanilla JavaScript project, this is the tool that I would reach for. And again, I I I kind of liken this to yes, I could create a Java project today without any build tools, but I probably would never do that. At some point, I need a dependency, right? Even if it's
• 32:30 - 33:00 some something like JUnit, I'm going to need a dependency. So, I'm always starting a Java project with a build tool. Um, in this case, that's similar to what I'm doing here. So, I'm going to say, hey, I'm going to create a vanilla JavaScript project. I want to use JavaScript. And now I'm done. It even gives me some uh instructions here. So, I'm going to CD into Java 1. Oops. And then run npm install or npmi. So, this is going to look at that,
• 33:00 - 33:30 download the dependencies, and don't try this on Wi-Fi. I'm actually on a hot spot right now to go look. But I will say, um, there are very few dependencies in this project, and we'll see that here. So, I'm gonna open up this project in uh Intelligj. That's fine. And we'll take a look at kind of what a scaffolded project looks like. So, first off, you get this package.json. Again, this kind
• 33:30 - 34:00 of defines the project, has a name, has different scripts. If you were if you've ever been dropped into a JavaScript project and weren't sure, okay, I can run npm run what this is what defines the scripts that are available. So I can run npm rundev and that basically kicks up that V dev server for you. So I can run npm rundev build or preview. The dependencies are hey this these are the the dependencies that this project needs
• 34:00 - 34:30 and again this is kind of our entry point to our application. Then even though this is again just a vanilla JavaScript project I have um this index.html uh if you're not familiar with kind of ES modules the new way of doing things. So now I can include this JavaScript file which is declared as a module type. So if I look in source I can see main.js that just has uh some JavaScript in there that actually includes um
• 34:30 - 35:00 another JavaScript. So it includes like these logos and then it includes this counter which is just going to allow us to like click a button and count uh increment or decrement counts. And again just a good starter. So if you if you want like this nice little bootstrapped application ready to go that's vanilla JavaScript view angular this is a really good starting point. So now I can go ahead and run this. So I can say uh npm rundev and that'll run on localhost
• 35:00 - 35:30 5174. I can go ahead and click on that. There's our logos. Here's hello vit and then that javascript to like go ahead and increment the counter. So this will become important because I'm going to use vit in kind of a full stack application in a minute. All right. Um, the other example I want to show you is this HTMX
• 35:30 - 36:00 one. So I have a controller here and in this controller I have an endpoint called generate. This is using a project in Spring called Spring AI. It's going to talk to a large language model. So we can ask it a question, get a response back. But uh the important thing here is we have this home method that returns an index template. So I have this index template and this is where we're going to kind of sprinkle in the HTMX to kind
• 36:00 - 36:30 of add some of these dynamic capabilities. Let me go ahead and close this. So if we go down, we have um kind of this we'll see it in action, but we have this like sidebar similar to like chat GPT, right? You have like a list of messages that you've sent today. there's a input box to enter in a message. So I have these um things from my list of messages. I have this main content which shows a response and then I have this
• 36:30 - 37:00 chat form. So if I look at this chat form here you can see uh the different HTMX elements. So we have an HX post again that goes to the generate. So when we click that or when we post this form it will send it off to that generate method. And uh this just has this message in there. So I could type in a message when I submit the form. Sends it to my backend. Gets the response. We send it back. So let's see if we can run this
• 37:00 - 37:30 one. And this should be a little bit different. I do love a good dad joke. So So I'm going to hit enter, which will cause it to post. Why did the dog sit in the shade? because he didn't want to be a hot dog. I It says the same one all the time, but it doesn't get old. Um, so again, that's if you want to start adding some like interactive components to your applications and you're working
• 37:30 - 38:00 with something like Spring or some other MVC template or really nothing at all. Maybe you have an API somewhere already and it's just like a vanilla JS project and you want to add that kind of interactivity to it. Uh I think HTMX is a really really good uh solution for that. All right, let's go into this one. Okay, so that brings us to JavaScript frameworks. Um what are they?
• 38:00 - 38:30 Modern solutions for building dynamic interactive UIs. You get some really great benefits out of this. So I can reuse all of these components that I built. Uh if you are building a vanillajs application and you start writing your own state management solution or write a routing solution, please stop. This is not something you want to be doing. This is why you can reach for a framework like React, Angular or Vue. And it's really for building like full-fledged front-end applications. So
• 38:30 - 39:00 again, you get this component-based architecture. If I need to upsate update something in the DOM quickly, uh I can do that. I can data bind. So as a value gets updated, the UI is updated automatically. If I need to route to different uh pages in the application, um it can do that. Uh being able to hold state, we get that templating out of the box. Really best for single page applications, interactive dashboards,
• 39:00 - 39:30 uh real time applications. Here are some features of uh frameworks. I'm going to kind of fly through this because I want to show an example of this. Uh again, I think once you learn one of these frameworks, you can really kind of learn each of like any of them there. They just all have their kind of different features, right? Um React has this like JavaScript in HTML syntax. Angular, you have to know Typescript to kind of be uh to use that because it's kind of built into it. Vue
• 39:30 - 40:00 um has a different approach to this and it has like a single file template where everything's in one thing. But um you can all these are great choice and there's there's other ones that I haven't listed here. What I want to point out here though is really as a Java developer here is where we have to like start making our decisions. Are we going to use a standalone deployment or an integrated deployment? So what do I mean by standalone? It means the JavaScript app is different from the
• 40:00 - 40:30 Java app that we write. And maybe the front end talks to our API over REST, GraphQL, gRPC, whatever it is. There are some pros and cons to this, right? Hey, I get separate builds. Maybe my front end changes a lot more than my backend and I need that to like scale it different um uh different different ways, right? Um so we get different scaling uh technology isolation, clear separations of concerns. There are some challenges with this, right? Hey, every time I'm that first time you create a
• 40:30 - 41:00 front-end app that talks to a backend app, you see that corores area, you're like, what is this? Right? So, you have to deal with things like core as an authentication flow and multiple deployments or do I want everything to be integrated in a single deployment. Um, inside of my say spring app, I may include the front-end application bundled with it. Uh, this is nice because everything's in a single artifact. I only have one thing that I got to deploy to production. But again, some challenges to this. Uh, every time
• 41:00 - 41:30 we want to update the front end, we got to like release the back end as well. So, these are some things you need to think about if you want to like build a front end in say like a JavaScript framework and you have a backend say in something like Java and Spring. I'll show you an example of this though. Let's go over here. And again, all of this is in that GitHub
• 41:30 - 42:00 repo, but I want to point this out um because in this example, I have just a Spring app. So, I started with the Spring app at start.spring.io and then I went into the source folder and I used Vit to scaffold out a front-end application. This front-end application is just a view application. You can see there's a few in here, but this structure should look pretty familiar to the thing that we built earlier. So now I have a front-end application inside of my backend
• 42:00 - 42:30 application. Now there are some challenges to this. We saw how we have to start a Spring app, right? We got to either from our IDE or from Maven, we got to start up our job app. Then there's that front-end app, too. I need to start that up. So in development, this might be kind of a pain in the butt to start up two different services, right? But there are ways to work around this. You can write uh a script that would do this for you. So if I wanted to run this, it should go ahead uh start up the
• 42:30 - 43:00 uh backend, wait, then run npm rundev with a certain profile and it even launches a browser for me. So there are ways around that. If you have those two apps and you need to start them up, um there are ways you could do this in your local development environment. There's also a problem of okay, now I need to go to production. How does how do these things these little puzzle pieces kind of fit together? Right? So, in this case, in a Java app, I can use a couple of Maven uh
• 43:00 - 43:30 plugins. One is the um Oops. One is the front-end Maven plugin. And so, this will go ahead and install Node and npm for me. Um it will run npm install. It will run npm run build. And so npm run build is using the using V to kind of build the production artifacts that we want to take to production. Then what we do in here is we use the Maven resources plugin to go ahead and copy everything from source
• 43:30 - 44:00 frontend disc into something like target classes static because in a spring app everything in that static folder is what's going to get served up uh for us. So when we run something like uh MVM clean uh package or clean install, this process will run and do all of the things that we need to kind of package up an application ready to go to production. So again, if you've ever kind of battled with that song and dance, take a look at the repo and
• 44:00 - 44:30 you'll see an example of how you can do that. All right, which brings us to the most important question. So, which one should I choose for my next project? We know this, right? Come on. It always depends on what type of application we're building. For me, these are some things I like to consider. Um, picking the right tool for the job. What is my developer skill set? If I have a team of Java engineers that
• 44:30 - 45:00 just know Java, have no interest in building HTML, CSS, JavaScript, learning some new front-end framework, and maybe I'm just building a back office kind of crud dashboard, I'm going to use something like Boden, right? Because I have engineers that have that skill set already. Solo developer verse team. This is a big deal, right? um being able to understand that this is an existing project or this is a new project where uh we can kind of pick what we want to do here. Architecture usually kind of
• 45:00 - 45:30 drives some of these questions, right? Existing architecture. Uh is SEO important? That you know that's always a big thing too like hey if we want to make sure that these articles are getting um uh seen on the internet these things are important. So these are some things to consider. Another just quick thing I'll point out is yes, robots can help you with a lot of this. Uh especially things like frameworks like VANE or JavaScript frameworks like Vue and React because it's been indexed on a
• 45:30 - 46:00 lot of these things in the wild, right? So if you want to be able to create a front-end app, robots are your friend. But don't just let it blindly do it. Uh make sure you kind of learn the process of what it's doing. All right, that's all I got. Um you can find me at that email at the real Danvega. And if you want to learn more about me, danvega.dev. Thank you.