Wednesday, September 8, 2021

Using Vaadin web components in HTML documents without frameworks

Vaadin is a development platform for building web applications in Java. Although it includes a Java API (Vaadin Flow) that you can use to implement the User Interface (UI) entirely in Java without writing any HTML or JavaScript, the UI components included in Vaadin can be directly and individually used in any HTML document without having to use Vaadin Flow, Vaadin Fusion, or any other web framework.

Vaadin UI components are implemented as Web Components. In short, a Web Component is a custom HTML tag or element that a developer can define. For example, on YouTube, you can see that the developers created a custom element called ytd-comment-action-buttons-rendered to encapsulate the action buttons associated with a comment:

YouTube uses Web Components

Vaadin has a collection of modern Web Components, and in this article, you'll learn how to use them with the help of two tools: npm and Parcel. npm is needed to manage the dependencies. An example of a dependency is the Vaadin button Web Component (vaadin-button). This Web Component is implemented in a set of files that you need to download from somewhere. npm helps with that. Parcel is a zero-configuration JavaScript module bundler. It takes all the JavaScript files that make up your application plus the dependencies and creates a single JavaScript file that you can publish with your application when you deploy it to production.

Create a new project

Create a new directory for your application. For example:

> mkdir vaadin-components-without-frameworks

Download Node.js. You need it in since it contains npm. Install it and initialize a new project as follows:

> cd vaadin-components-without-frameworks
npm init -y

This creates a package.json file in the current directory. This file contains, among other things, the dependencies that your application needs.

Create a new JavaScript file with the name index.js. Create a new HTML file that loads the index.js file. Use index.html as the name of the file and create a simple document as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Vaadin Web Components in HTML</title>
    <script src="index.js"></script>
</head>
<body>
    <h1>Using Vaadin Web Components without frameworks</h1>
</body>
</html>

Add Vaadin Web Components

Let's use Vaadin's button Web Component in this example. Download it using npm as follows:

> npm i @vaadin/vaadin-button --save

This creates a new node_modules/ directory where all the dependencies will reside. There, you'll find the files that form Vaadin's button Web Component and its dependencies. Web Components can have dependencies themselves.

Import the Vaadin's button dependency in the index.js file as follows:

import '@vaadin/vaadin-button/vaadin-button.js';

Using Vaadin Web Components

With the dependencies in place, add a Vaadin button in the index.html file as follows:

...
<body>
    <h1>Using Vaadin Web Components without frameworks</h1>
    <vaadin-button onclick='alert("It works!")'>Click me</vaadin-button>
</body>
...

Building and running the application

Download Parcel by running the following:

> npm install -g parcel-bundler 

To build the application, invoke Parcel as follows:

> parcel index.html

This creates the client-side bundle and the distribution files in the dist/ directory. These are the files that you can deploy to a web server in development, testing, or production environments. In fact, when you run the previous command, Parcel starts a development server. You can invoke the application at http://localhost:1234. Here's a screenshot:



Share:

Friday, August 13, 2021

New book - Practical Vaadin: Developing Web Applications in Java

I'm glad to announce the availability of my most recent book, Practical Vaadin: Developing Web Applications in Java published by Apress, a division of Springer Nature.

Practical Vaadin: Developing Web Applications in Java

The book teaches you how to develop Java web applications from scratch using the Vaadin open-source framework. You don't need to have any experience in web development to follow this book. On the contrary, the book starts by explaining the key technologies in web development and how Java fits into the picture. You'll learn how web servers operate, what a client/server architecture is, and how Servlets are the foundation of Java web development.

With a solid knowledge base established, you'll dig into web Graphical User Interface (GUI) creation using the Java Programming Language. The book shows how to add buttons, text fields, combo boxes, data grids, and how to connect the values in input fields to Java domain classes using data binding. You'll learn advanced topics such as authentication and authorization (login view and permissions), Server Push to update the UI from threads running on the server, the Vaadin's Element API to gain low-level access to the Document Object Model (DOM) in the browser, responsive design to automatically adapt the UI to different screen sizes, and much more.

The book also covers client-side UI implementation using Vaadin Fusion, a feature of Vaadin that allows you to implement views using the TypeScript programming language. It also covers integration with Spring Boot and Jakarta EE, alongside introductions to the basic concepts in these two technologies. The examples show how to efficiently connect to SQL databases using connection pools, and how to consume the data using the popular Jakarta Persistence API (JPA).

The book is available in print and digital formats on Amazon and many, many online bookstores. Here are some links:

I truly hope this book helps those starting their careers in web application development with Java, and those avid to learn more or refresh their knowledge on the powerful Vaadin Java web framework.

Share:

Friday, July 2, 2021

Designing an open-source Community Award

I had the pleasure to announce the Vaadin Community Award during Vaadin Dev Day Spring 2021. This award is a way to recognize members of the Vaadin Community who actively participate and help others through forums, social media, events, code, and more. The Vaadin Community has been growing rapidly over the past years and more and more individuals have become extremely active online and in conferences. In the Community Team at Vaadin, we figured it only makes sense to officially reward those who constantly help developers and decided to create that Vaadin Community Award (VCA).

I lead the effort by looking into other similar programs in the software industry. Companies such as Google, Oracle, Red Hat, Microsoft, and others have multiple programs to recognize the efforts of their community members. From ways to select the winners and promote the program to the program's name, we quickly made adjustments from the initial idea using the findings from others. For example, initially, we proposed the name Most Valuable Professional. However, the acronym didn't play well for a company that produces web frameworks—MVP is easily understood as Model View Presenter by web developers, or even worst, as Minimum Viable Product! From there, we proposed alternatives and selected the name Vaadin Community Award.

A brief description of what the program intends to achieve is always useful. So I wrote one that describes the essence of the program:

The Vaadin Community Award (VCA) is a program that recognizes community members with an exceptional track record on community participation. The VCA is given to members that actively lead online and local Vaadin communities, speak at conferences or Java User Groups, create and maintain Vaadin Directory add-ons, publish articles and videos, engage in social media, Discord, and Stack Overflow discussions, and in general, passionately help other members of the community.

This helps the team and the community understand what the program is about concretely. It helps to give examples of things that community members should do to win the award. I left the benefits out since this is better explained with bullet points, and it shouldn't be (and it usually is not) the main motivator for members to be actively engaged in the community. Often, the driving factor is to get recognition and experience to show that they are proficient or have the passion for working on technical projects or communities around open-source software.

Coming up with a set of benefits is important nevertheless. From officially receiving the recognition to getting tangible prizes, a good set of benefits have the potential to keep the winners engaged in the community and inspire others to join the selected group. At first, the idea was to give a certificate that the winners can download plus extra powers in the Vaadin Discord server (chat). This combination works well as it officially recognizes the title and gives more tools to the winner to continue to help the community. We later added a physical recognition token that we would send to the winners, like a trophy that they can put in their homes to remind them how valuable they are to the Vaadin Community. We also decided to create a web page with information about the program and a list of winners to boost the recognition part. I proposed to give them a one-year subscription to the Pro offer of Vaadin for free—if someone has been helping the community to the point of earning this award, they should definitively have all the tools Vaadin develops in their belt. And to complete the package, we added the possibility to be interviewed for the Community Spotlight series.

Another aspect to consider when designing a community award is how to select the winners. Who nominates members, and who picks the winners? How many of them and for how long do they retain the title? For the VCA program, we decided that previous winners should nominate new candidates and the whole community select the winners through voting. By doing this, Vaadin yields control of the program to the community. We initially decided to give the award for a period of one year, allowing winners to be nominated and win the award in subsequent years. The goal was to encourage previous winners to continue to work for the community. However, if previous winners are the ones nominating new ones, this wouldn't make much sense, so we discarded the idea. When the program starts, there are no winners yet, so we decided to select the initial ones internally at Vaadin to get a good starting team.

In summary, come up with a good name and description, select a good set of benefits, and come up with a good way to select the winners avoiding situations like "you have to do this specific thing to win." Let the community participate in the process as much as possible.

Share:

Friday, April 30, 2021

How to participate in and contribute to open source projects

I like to think about open-source involvement in terms of levels. Although no level is more important than the other, they build up on top of each other and take you through a good path to become a key member of an open-source community. In short, the levels are:

  1. Observer
  2. Member
  3. Contributor
  4. Committer
  5. Maintainer

Become a user of the product

The best way to get inspired and start contributing to an open-source project is by using it. It's a natural first step. You'll learn about the vocabulary around the product, its strengths, and its weaknesses from a user perspective. Your interest in improving the product will increase alongside your motivation to contribute back to the community.

This level makes you an observer.

Join the community

Once you become a regular user of the software, you'll feel comfortable using the software and talking about it. You'll learn where to find help and how others use the software. You'll visit community forums and start asking questions. Eventually, you'll also answer questions. You are participating in the open-source community at this point. Forums are not the only way to participate in the community. You can present the software to others, talk about it, and promote it with your peers. The critical part here is that you interact with others who are or might be interested in the software.

This level makes you a community member.

Report bugs, issues, and improvements

Once you become a regular user, you can start reporting defects (bugs, issues) to the maintainers. Open-source projects typically have online tools for this. For example, if the project is hosted on GitHub, you'll most likely find an issues tab. Be considerate, and check if the bug has already been reported. If that's the case, see if you have new information useful to the maintainers. If not, open a new case and provide valuable information on the issue. If they have any, follow the guidelines of the project to report issues. Make sure you use formatting tools (especially for logs or source code when applicable) and attach relevant screenshots if they are relevant. Suggest improvements on issues but also as new ideas.

This level makes you a contributor.

Send source code contributions

If you are a software developer, this is the level you are most interested in. Your path towards contributing code can start with simple patches, add-ons, or documentation. They are frequently managed in the same way—through source code version control systems such as Git. Look for contribution guides in the project website, download the source code, and set up a development environment. Some projects are massive in terms of the number of lines of code, so be prepared to spend some time getting familiar with the big picture and focus on building and running the project. I guarantee you that seeing the software running from your very own built is a highly satisfying and motivating experience. Experiment by changing the code and seeing the results. Jump to the project's bug tracker and see if there are any easy-to-tackle bugs you could hunt. Often, maintainers mark a bug as a "good first issue" when they estimate that the effort required to fix it is low. Always go through the contribution guidelines for committers and stick to the processes that the project has established for good collaboration.

This level makes you a committer.

Become a key member of the project

As you contribute more and more to the project, you'll find that other community members start to recognize and trust your work. You have demonstrated your skills and passion for the project, and people trust your ability to make good decisions to help the project succeed. In many open-source projects, maintainers can nominate or even directly select community members to become permanent contributors to the source code. You'll start reviewing other's patches and, likely, implementing new features and help drive the future of the project. Only genuine interest and constant work in the project will take you there. The road can be long, but I promise, it's an exciting one at each of the levels I describe here.

This level makes you a maintainer.

Share:

Sunday, April 18, 2021

Blog rebrand

Hey reader! A short entry to announce and document my blog's rebrand. These are the main changes: 
It's been a while since I wrote for my blog. I had been busy publishing mostly on vaadin.com and dzone.com, but I do want to keep this one alive and this rebrand is proof of my motivation. I wanted to move the focus to the content rather than the author's profile. So, I found a Blogger theme that fits this purpose well. It doesn't show lateral menus all full of me, me, and me. Instead, most of the space is organized around the articles without distracting images and with the important information highlighted. At the bottom of the pages, you can always find a footer with more information about the website.

From now on, I'll try to share useful information around programming, software development, Java and its ecosystem, Vaadin, databases, and other technical topics. I also want to share thoughts on Developer Relations (or Developer Advocacy) and open-source community management. You can always send suggestions on topics that you would like me to discuss as well. I'd love to hear from you!

Big thanks to Sandpatrol for the design, NewBloggerThemes.com for the theme, and Blogger for the hosting.
Share:

Friday, April 16, 2021

How to start a career in coding


A couple of days ago, a good friend of mine asked me how to make her kid more interested in programming. I think that parents should focus on giving kids opportunities to try different things instead of pushing them to take a route. Success is guided by motivation, and motivation comes from the inside. The best programmers I know started and continued their careers because they enjoyed the craftmanship of coding. They were attracted to the cryptic look of a screen full of code. They liked the tactile nature of typing code on a keyboard. They were amazed by how a series of words in English mixed with special characters lead the computer to show something on the screen. They quickly grasp the idea of a series of steps typed in a text file and how the computer understands these steps and executes them. They early discovered that the computer is, in the end, a dumb machine that obeys the programmer. None of them told me something like, "I started to program computers because I knew I would have a job in the future." No. The motivation is in the craftsmanship.

Like with many other disciplines, you can try programming and see if you like it. I started when I was about 13 years old. Since it seemed my brothers and I liked computers and we had gotten our first one, my parents bought a series of books on computers for kids. The third book was about programming. The programming language that the book explained was BASIC, a general-purpose language with an easy-to-read syntax. I don't think you need to be a kid or a teenager to start a career in software development. All you need is to experience coding by yourself and be honest with your feelings. If you enjoy the process, you'll get trapped in it and your curiosity will guide you.

So, let me show you how you can try coding by using the BASIC programming language. Unlike in my days of learning how to program, you don't need to install anything (lucky you!). Head to https://www.jdoodle.com/execute-freebasic-online and follow the rest of this article. This won't work if you don't go and open that page, preferably, from a computer (as opposed to a mobile device).

What you see on the website I pointed you to, is a screen divided into several sections. On the top, you have a text editor where you'll be typing your code shortly. At first, you'll find a short program already typed for you. Remove all that. Select the text and hit the delete key on your keyboard. We want to start coding from scratch! Next, you'll see a section to configure things out. I want you to make sure that you turn the "interactive mode" on by clicking on the switch that says Interactive. The switch should be turned to the right. Next, you'll see the area where the result or output of the program is displayed.

A programming language consists of words. Very few words actually, especially when compared to a human language. We are going to use upper-case for those words that are part of the BASIC programming language. For the rest, we'll use lower case. Let's get started! Type the following on the code editor at the top of the page:

PRINT "This is my first program ever!"

Click on the Execute button. You'll see the text "This is my first program ever!" on the output. Try adding another line of code to make the program show the message "I'm coding!" in the output.

PRINT "This is my first program ever!"
PRINT "I'm coding!"

Remember to click on the Execute button every time you want to see the result of your program. You'll see that the output shows the texts in the order in which you typed them in the code editor. Try switching the lines of code:

PRINT "I'm coding!"
PRINT "This is my first program ever!"

Once again, the output shows the messages in the same order as your instructions. The computer executes each line at a time from top to bottom. Let's try an essential concept in programming—variables. A variable is a space where you can store a value like a number, for example. A variable has a name and you are free to use any name as long as you don't use a reserved word like PRINT and others. Define a variable to hold a number by inserting a line of code at the very beginning of the program:

DIM n1 AS INTEGER = 7
PRINT "I'm coding!"
PRINT "This is my first program ever!"

The line you added tells the computer to create a variable with the name n1 and store the value 7 in it. The variable is ready, so you can make the program tell its value:

DIM n1 AS INTEGER = 7
PRINT "I'm coding!"
PRINT "This is my first program ever!"
PRINT n1

When you run (another term for "execute") the program, you'll see the number 7 in the output. Imagine that the variable n1 is the computer's favorite number, so you want the computer say "I like the number 7". You can just use PRINT "I like the number 7" but that's boring. Instead, let's use the value in the variable n1. To do that, you need to add the value at the end of the text "I like the number ". To do that you can use the ampersand character (&):

DIM n1 AS INTEGER = 7
PRINT "I'm coding!"
PRINT "This is my first program ever!"
PRINT "I like the number " & n1

Run the program and see how the computer tells you the number it was programmed to like. Change the value of the n1 variable, and rerun the program. For example:

DIM n1 AS INTEGER = 4
PRINT "I'm coding!"
PRINT "This is my first program ever!"
PRINT "I like the number " & n1

A cool thing about variables is that they can store values you can type when running the program. For example, let's make the program ask you what number you like. For that, you can use the INPUT keyword of the BASIC language. We need three new lines. One for telling the computer that we need another variable (to store your answer), one to ask the question, one to get the input from the keyboard. Add them at the end as follows:

DIM n1 AS INTEGER = 4
PRINT "I'm coding!"
PRINT "This is my first program ever!"
PRINT "I like the number " & n1
DIM n2 AS INTEGER
PRINT "What number do you like?"
INPUT n2

Run the program and answer the question! Type a number and hit ENTER. The instruction INPUT n2 tells the computer to pause the execution of the program until the user (that's you as well since you are the programmer and the user of your own program!) types a number and hits the ENTER key. The value that the user types is stored in the n2 variable. Now you can use the value to show another message to the user:

DIM n1 AS INTEGER = 4
PRINT "I'm coding!"
PRINT "This is my first program ever!"
PRINT "I like the number " & n1
DIM n2 AS INTEGER
PRINT "What number do you like?"
INPUT n2
PRINT "Cool, I also like " & n2

A powerful thing computers can do is compare things and execute code if a condition is fulfilled. For example, let's say you want the program to show a message if the number that the user introduces is greater than 999. You can do that by using the IF and THEN keywords:

DIM n1 AS INTEGER = 4
PRINT "I'm coding!"
PRINT "This is my first program ever!"
PRINT "I like the number " & n1
DIM n2 AS INTEGER
PRINT "What number do you like?"
INPUT n2
PRINT "Cool, I also like " & n2
IF n2 > 999 THEN PRINT "It's a big number!"

The last line checks whether the value stored in the n2 variable is greater than 999 and shows a text in the output if so. Otherwise, the program won't show the message. Run the program and introduce a number like 1000. Try also entering a small number and see the different behavior of the program. You are making your program look smarter and smarter!

I'm going to leave it there for now. Did you enjoy the experience? Was it fun to type code, click the Execute button, and interact with your own program? This is the essence of what a programmer does, and if you had fun and cannot wait to type more code, you are on the route to becoming a programmer! If you found it tedious or hard to understand, it might have been my teaching methodology that doesn't suit your learning style. Try other resources, like videos or books, and reevaluate your experience.

There are many programming languages. It doesn't matter which programming language you want to learn. You can continue your journey with BASIC or jump to a language such as Java, Python, C++, or any other that you find interesting for whatever reason. I recommend you get a book on the language you pick and read it through. Code small programs to understand the concepts or if you have a fun or funny idea, go ahead and code it!

Once you feel comfortable with a programming language, explore the libraries that are available for it. A library is code that someone else has written to fulfill a particular function. A library can include code for making it easier to render graphics or images, store data in files, show input controls like text fields and buttons, run complex financial calculations... The list goes on and on.

At some point, you'll have to learn concepts such as data structures and algorithms. Make sure to study the basics of these two topics as well. Read about software engineering. Learn about unit testing and source code control systems such as Git. But don't worry about these things when you are starting. Bookmark this article and come back as you progress. I really hope you continue your journey and, most importantly, that you enjoy it! If someday you get a job as a coder, let me know! I'd love to hear your story.
Share:

Tuesday, July 23, 2019

My Experience Talking at JConf Colombia

Ever since I joined the team at Vaadin I had wanted to showcase our technologies at a local conference in my home country, Colombia. This year, the organizers of JConf Colombia 2019 invited me over to give not one but two talks during the event. It was good timing–the conference took place around the summer vacation time I had already planned to have in Colombia (I'm based in Finland).


So, I packed my suitcase with the usual essentials, plenty of Finnish treats (read, salmiakki) and a bunch of Vaadin stickers and T-shirts. Unfortunately, this swags didn't make it to Medellín (where the conference took place) since I know quite some people in the IT industry in Bogotá, where I initially landed in Colombia. Vaadin T-shirts are super popular! So, blame my IT colleagues in Bogotá if you didn't get one at the conference. Kidding. It was bad planning from my side, sorry. Catch me at the next conference I'll get you one.


I headed to Medellín two days before the conference started and was picked up at the airport by Geovanny Mendoza, a fervent Vaadin fan to whom I'm more than grateful. He has also been talking about Vaadin in other versions of the Latin-American JConf conferences. We spent the rest of the day talking about technology and the promising future of Vaadin.


The next day, I visited IBM Colombia and presented Vaadin and its philosophy–code your web UI in Java without JavaScript or HTML. Most of the audience didn't know about Vaadin at all. They looked impressed by how fast you can get started with it. The code, to them, resembled the API of Java's Swing, which many developers used when they were learning Java. However, it was an eye-opener to realize that the younger developers didn't know about Swing nor had used it before. And even so, they were easily guessing the names of the Vaadin API's methods I had to use while coding.


The first track of the conference started the next day. It was held in the theater of the University of Antioquia which has a capacity of more than 1000 people. Talks were mostly technical but there was an emphasis on community and open source.


My first talk at JConf Colombia, Colombians in the Open Source World: Our Experience Working for Payara and Vaadin, was shared with the talented Fabio Turizo, also Colombian, and a Java Architect and Developer working as a Service Team Manager for Payara. I hope we can do additional collaborative work in the future with Fabio and Payara's technologies.


In our talk, we shared our experience working for open-source companies. What are these companies all about? What products do they develop? How did we end up working there? How is it to work for these companies? What do we do at these companies? It was fun to share this kind of insights, and since Vaadin is so simple to use and everybody in the audience was a developer, I managed to explain what Vaadin is in a single slide with a "Hello, World" application. After the talk, I was amazed by some developers in the audience who approached me to ask more about Vaadin, both the company and the web framework.

The second track was on the next day at Ruta N Complex. A day packed with amazing international and national speakers with highly technical topics. I quickly prepared my laptop for my talk Implementing Modern Web Pages in Java and got the chance to talk about the very origins of the Spring + Vaadin integration with its own creator Josh Long from Pivotal before heading to the auditorium.


During my talk, I implemented a simple "comment system" from scratch. Developers were amazed by how you are able to leverage the full potential of a Java IDE (I used IntelliJ IDEA) while coding the presentation layer of an application with Vaadin. It was marvelous to see "wow" reactions during my talk.


After a couple of silly jokes, refactorings, and fun with Java code, we continued having conversations with developers who, again, wanted to know more about Vaadin. They were curious about how to integrate web components, how to organize or modularize the code, and how a company that releases an open-source free product makes money.


I had a blast at the conference. Finally got to meet face-to-face Reza Rahman from Microsoft, and Josh Long and Mark Heckler from Pivotal. Plenty of “wow” reactions during my talks which was a nice reminder that we are developing a really cool technology at Vaadin. Thanks for the inspiring discussions to the people from Payara, IBM, and Jakarta EE and all the organizers of the event. I'm definitely looking forward to joining the 2020 edition!

Share: