Buscar este blog

Theme images by MichaelJay. Powered by Blogger.

Datos personales

Our 2nd year in review: keep flowing!

Another round around the sun, another term ended, and here we are still moving on. A lot of things happened since this team was created, ...

Author Info

Video Of Day

Flickr

We deliver intelligence

Team of experts working to fulfill your software needs

About Us


Expertise

We are a team of professionals with extensive experience in the field of enterprise application development.

Our Services

We provide various services according to the needs of your business.

Efficiency

Trust in our knowledge, coding is our passion.

Contact

Feel free to contact, tell us your needs and we'll help you out.

Are you interested in what we do so far?
Let's talk about your project !

GET IN TOUCH

Flowing Blog
Explore our ideas

Wednesday, April 3, 2019

Our 2nd year in review: keep flowing!

Another round around the sun, another term ended, and here we are still moving on. A lot of things happened since this team was created, and many of them last year. Here’s a quick review of what we did:

Traveling

Let’s start with one of the best experiences we got the chance to share as a team. We had the opportunity to visit the northern hemisphere to meet our friends at Vaadin’s main HQ.
While we were there, we shoot some awesome pictures, visit some interesting places and had the amazing chance of getting to know all of the experts behind the company that is responsible for this great open source framework.

Sharing

Talking about Open Source, we continued to support our community, and created a special section in our web site to group all of the projects that we maintain.
We worked hard to develop a bunch of interesting projects, giving away our best effort to make them production ready, so anyone can use our technologies in their projects, and participate with us actively so they can improve over time.
One interesting project to mention, was a small PWA application that displayed the results of the Football Worldcup in real time, showing how to integrate several technologies, so similar projects can be built using this a kickstart.

Learning

Delivering intelligence is not an easy task if you don’t find a way to expand your knowledge. We take this statement seriously: we schedule one learning day each week, so we can watch, learn and discuss about many technologies, methodologies, frameworks, languages, etc.
Here’s a list of the subjects and some interesting links for you to watch if you’re curious:


Writing

Having the opportunity to learn, and code, one final step is to share some of this knowledge, so we wrote some interesting articles about specific subjects, here’s a short list:


Speaking

But that is not all. We organized a talk in one of the most important universities in the area: Universidad Nacional del Litoral.
The chosen topic was to explain what is all the fuzz about Vaadin 10 and Web components.
You can find more information about it in our blog.

Delivering

We finished some interesting projects for new customers, growing our portfolio. Here is a summary of them, but with the promise that we will expand these experiences later in our site:

  • We continue working as consultants for big medical software implementations in U.S., and also giving technical and architectural support for big companies all around the globe.
  • Full SCM implementation for a customer in Colombia, that involved the installation and configuration of several servers, testing the entire stack, training several areas and finally taking care of every detail while going to production
  • Development support for a big application related to job openings, of a customer from Buenos Aires, that involved working with email marketing campaign tools and invocation of REST-APIs
  • Vaadin 7 to 13 migration, of a web module of an ERP software of a company from Rosario - Argentina

Networking

We continued sharing everything in our social networks, now you can find us in:


So that’s it, we are really happy with our results, so let’s finish with this quote from Albert Einstein:

Life is like riding a bicycle. To keep your balance you must keep moving.

In our case we will keep flowing. Thanks for reading!

Tuesday, January 8, 2019

Creating a Vaadin Flow Server-Side API for a Javascript component

Today we are going to explore some tips about how to create a Java server-side wrapper for a regular javascript component using Vaadin Flow. As you might notice, this popular framework has good documentation about how to integrate an existing Polymer Component, but there is no much info about how to integrate a regular Javascript component, so we will show you one easy approach of doing that.
What we want to do is, to show you how to create a nice Java API around a typical javascript component, so you can easily integrate it in your java applications.
Of course, there are many ways to build javascript visual components around there, we will focus on the ones that use this common pattern: you create a html element (like a Div), and then you instruct the library to "enhance" it.
Then we have one important feature that is usually wanted: bidirectional communication between the server and the client.
For this short tutorial we want to build a Vaadin Flow wrapper around one interesting library that is able to draw time line graphs: vis.js. This library is based on the previous premise: to enhance (in this case) a div html tag.
Let's start.

Step 1: Overview of your component

First, it’s a good idea to use a starter to build a project based on Vaadin. We will use this one, which is perfect for creating a new component. Because it’s mandatory to specify a base GitHub project, just leave the one that is offered, you can change that later.
We want our component to be easy to use; hence, following Vaadin conventions, we will create a simple class that will extend a Div component. This class will be able to render the component in the client side, exposing some methods that will give the developer the ability for interacting with it in several ways:

public class Timeline extends Div {

}

Step 2: Defining dependencies

If we were going to use the component in a regular web page, the first thing that we would need to do is to tell the browser to fetch the libraries and styles, and the same holds true for a Vaadin Application.
You have three ways to do this:
  • Download the library and just copy the static resources in your src/main/resources/META-INF/resources directory, and they will be served in your web application.
  • Use a CDN
  • Use a webjar dependency
The first option is stable enough, but it could bring problems if you forget to unzip something (additionally version management is a bit cumbersome). The second one is a good choice, but you can’t always find out there the library that you want to use. Another drawback is that users with restricted access to the internet will not be able to use your component.
So we will use the webjar dependency strategy. For a detailed explanation, we recommend you to read this article.
In our case, this step involves basically adding the following to your pom file:

<dependency>
 <groupId>org.webjars.npm</groupId>
 <artifactId>vis</artifactId>
 <version>4.21.0</version>
</dependency>

But how  to tell the browser to only import the library and styles when the component is needed? In Vaadin Flow that is easy, just use a couple of annotations in your component:

@JavaScript("/webjars/vis/4.21.0/dist/vis.js")
@StyleSheet("/webjars/vis/4.21.0/dist/vis-timeline-graph2d.min.css")
public class Timeline extends Div {

}

Step 3: Creating the component instance

According to the vis.js documentation, you need to do three things to give life to our component:

  1. Find the div that will host the visual component
  2. Create some configuration data
  3. Create the TimeLine

This is done by this plain javascript snippet:

// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');

// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
  {id: 1, content: 'item 1', start: '2013-04-20'},
  {id: 2, content: 'item 2', start: '2013-04-14'},
  {id: 3, content: 'item 3', start: '2013-04-18'},
  {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
  {id: 5, content: 'item 5', start: '2013-04-25'},
  {id: 6, content: 'item 6', start: '2013-04-27'}
]);

// Configuration for the Timeline
var options = {};

// Create a Timeline
var timeline = new vis.Timeline(container, items, options);        

There are several ways of calling this from our component, we will use the executeJavaScript() method of the useful Page Vaadin object.
For that we will create a String that will contain this javascript function, with only some modifications. First, we will provide the container as a parameter. The container is basically our Div class (TimeLine). We can send it as a parameter and then reference it inside the function using the “$0” placeholder. We could send more parameters by using “$1”,”$2” and so on.
Now we need to send the Items, for that we need to create a class for those:

public class Item {
 
 private Integer id;
 private LocalDate start;
 private LocalDate end;
 private String content;
 public Item(Integer id, LocalDate start, LocalDate end, String content) {
  super();
  this.id = id;
  this.start = start;
  this.end = end;
  this.content = content;
 }

  /* getters and setters */

 protected String toJSON() {
  JsonObject js = Json.createObject();
  if (getId()!=null) js.put("id", getId());
  if (getContent()!=null) js.put("content", getContent());
  if (getStart()!=null) js.put("start", getStart().toString());
  if (getEnd()!=null) js.put("end", getEnd().toString());
  
  return js.toJson();
 }

}

To generate the function we are going to use to initiate the library, we will use this method:

private String createInitFunction() {
 String function = "  // Create a DataSet (allows two way data-binding)\n" + 
   "  var items = new vis.DataSet([\n" + 
   items.stream().map(item->item.toJSON()).collect(Collectors.joining(",")) +
   "  ]);\n" + 
   "\n" + 
   "  // Configuration for the Timeline\n" + 
   "  var options = {};\n" + 
   "\n" + 
   "  // Create a Timeline\n" + 
   "  var timeline = new vis.Timeline($0, items, options);" + 
   "  $0.timeline = timeline";
 return function;
}

We will explain the line “$0.timeline = timeline” later.
Finally, we need to invoke this initialization function from the constructor, which will receive a list of items:

public Timeline(Item ... items) {
 this.items = Arrays.asList(items);
 String initFunction = createInitFunction();
 UI.getCurrent().getPage().executeJavaScript(initFunction , this); 
}

We can now test our component. With just this little line in the DemoView we can run the application and have an early look of it running in our browser:

@Route("")
public class DemoView extends Div {
    public DemoView() {
        add(new Timeline(new Item(1,LocalDate.now(), LocalDate.now().plusDays(2), "Task 1")));
    }   
}

Step 4: Client-Server communication

First, let’s see how to invoke a given method of our javascript component from the server side.
Suppose we want to invoke the method focus() of the timeline javascript component. The catch in here is that we need a reference to the timeline object created by the initialization method. That was accomplished with the line $0.timeline = timeline on the initialization function, we basically stored a reference to it in our div element.
Then we can invoke a method by using:

public void focus(Item item) {
 UI.getCurrent().getPage().executeJavaScript("$0.timeline.focus($1)", this,item.getId());
}

In this method we receive a given item and send the id as a parameter to the method focus, as specified by the public API of the timeline.
Now the other way around: our javascript component will produce events that we want to catch from the server side. How to do that? By creating a custom Event. In our case, we want to be able to do something when a given item is clicked; thus, we need to define the ItemClickEvent:

@DomEvent("click")
static public class ItemClickEvent extends ComponentEvent<Timeline> {
 
 private Item item;
 
  public ItemClickEvent(Timeline source, boolean fromClient,
   @EventData("element.timeline.getEventProperties(event).item") int id) {
  super(source, fromClient);
  source.items.stream().filter(item -> item.getId().equals(id)).findFirst()
    .ifPresent(founditem -> this.item = founditem);
 }

  public Item getItem() {
  return item;
 }
}

Lot of things to say for this code:
With @DomEvent(“click”) we are telling flow that we want to listen for “click” events fired in the client side
We are extending ComponentEvent<Timeline>. That will give us some basic stuff like for example the ability of unregistering the listener
With @EventData, we are informing that we want to bring some data along the event. Basically we are calling the method getEventProperties(event) of the stored timeline instance, and then retrieving the item that was clicked. The item is offered by a integer, which we will use to obtain the correspondent Item java instance in the server side.
Ok, now we have the event, but we need to offer the API for registering a listener that will receive our event:

public Registration addItemClickListener(ComponentEventListener<ItemClickEvent> listener) {
 return addListener(ItemClickEvent.class, listener);
}

As you can see, our method will receive a ComponentEventListener based on our ItemClickEvent, and with that it will call the inherited method addListener() that will take care of the necessary tasks for making it work.

Step 5: Use it and have fun!

Using our component is as simple as this:

Timeline tl = new Timeline(new Item(1,LocalDate.now(), LocalDate.now().plusDays(2), "Task 1"));

We can also do something when a given item is clicked:

tl.addItemClickListener(ev->Notification.show("Clicked on item: " + ev.getItem().getContent()));

Finally we can focus on a task:


Button b1 = new Button("Focus task 1");
b1.addClickListener(ev->tl.focus(items[0]));

And that’s it!
Here's an animated GIF that shows the main features of this tutorial:


If you want to play around, the sources are available in GitHub. The example is structured as a sequence of steps, where each commit represents an incremental change from the Add-on Component Starter for Flow
We are planning to release a component based on this example, stay tuned!

Tuesday, December 18, 2018

Planning your SCM strategy

We have been frequently asked by companies that are planning or are developing a software product about the common issues found trying to achieve a good production workflow, good teamwork and the security of properly handling the code base.
During our years of expertise we developed a strong vision about the most important tools that you need to use if you want to build software in a controlled way.
These tools encourage the implementation of a Software Configuration Management (SCM) strategy within your organization. In turn, this will have a great positive impact in many aspects, some of them technical, but also in many functional and workflow oriented ones.
Today most of software engineers take these tools for granted. But there are cases where companies with small development teams or organizational debts need some help figuring out these stuff. In that spirit we are writing an overview of this topic.
Most of the important problems that could come up are solved by properly installing, configuring and using this tools.
One key fact is that these tools are important regardless of the language or platform that you're using.

First step: Secure your code

You have invested a lot of resources in building your product and you have a few customers using it. The source code is the most important part of that product, so the first issue you have to consider is how to store your code in a secure manner while helping improve the way your team work together without conflicts.
The solution to this is using a Version Control Software. In the beginning there were many different options to choose from, but these days almost everyone is using Git. It's one of the most advanced tools for handling code for large teams and it's easy to find candidates with experience using it.
Of course there are others: SubVersionMercurialTeam Foundation ServerBazaaretc.

Second step: What about the packages?

It's almost impossible to find an organization that builds software without a VCS, but the same cannot be said about handling the binaries or artifacts that you create to distribute your software. Most engineers don't even know there are tools that can be used for this. And why should they consider using such a tool?
In order to answer this, first we need to think about what are the steps involved in writing software:
  1. We begin by writing the code. You can use a minimal tool for doing this, like a simple notepad application, or you could use a heavy IDE with modern code generation techniques, but you almost always end up in tons of text files.
  2. Then, depending on your platform you might need to compile the code into a binary or intermediate format. That is a process that takes a source code as an input, and produces binary files as the output. This step might not be required if you're using an interpreted language as Javascript or PHP. But even in those cases, there are usually a transpilation process that creates new forms of code optimized to run in different browsers, and environments.
  3. Next you test the application in your local environment.
  4. If everything is ok, and you're ready for the production deployment phase. This involves taking the artifact that you tested locally or in a test environment and placing it in the server that is going to expose your application.
To be completely sure that there are no problems with the generated artifact, the best is to always perform the build in a clean environment (we'll explain this later), and in order to avoid repeating this process unnecessarily, the best is to store it in a safe place. This is when the binary repository shows its strength. This tool will store the artifacts in an organized and reliable way so you can download them when you need to deploy, but also when you need to build another software based on a library, for example.
There are many options available: NexusArtifactoryArchiva, etc.

Final step: Continuous Integration

Having the source code and the produced artifacts in place is only the beginning. Automating the construction of the applications and libraries will give you many advantages:
  • Having a clean and centralized place where the software is going to be built. Usually in many companies, the senior developer or the technical leader is the one that builds the artifacts that are going to production. But what if he or she forgets some work in progress or experiment, and then some unwanted behavior is accidentally introduced in the production ready artifact?
  • The building pipeline can be triggered upon changes on the code. This can help in finding possible issues earlier, thus reducing time spent following up on them when found in production, and of course it finally produces better quality deliverables. 
  • The building recipes can be standardized, so no wheels are going to be reinvented in that matter.
  • You can control who triggers builds and deployments, and have logs about those actions. That at the end means better control of the changes that have some impact in important environments, such as staging, testing, etc.
There are many alternatives for this kind of software, but one of the most well known is Jenkins CI. This open source project stands out due to its very large and active community, a vast list of plugins and extensions, addressing almost all of the problems that can arise when configuring this important part of the SCM strategy.
But there are other good choices as well: TeamCityTravisBambooetc.

Bonus track: Versioning scheme

But that is not all, you also need to define how to version your software and libraries, how to handle the release of your artifacts, how to manage dependencies, etc.
For that there are many tools, depending on the platform. For Java developers, Maven is almost a de facto standard, but you can also count with Gradle and Ivy. For .NET platform, you have NuGet, and for Javascript world, you have NPMBower and Yarn. All of them can be configured to be used with the binaries repositories, and the CI servers available.
Given the difficulty that can emerge when defining this process in your company, the best is to have the advice of experts.
We have years of experience in this subject, and helped many customers in defining and implementing their SCM strategy, so feel free to contact us and get more information.
See you all in the next post.

Tuesday, December 4, 2018

Wednesday, November 14, 2018

Monday, September 24, 2018

Developing modern web-apps with Vaadin @ UNL

Last Wednesday we gave a presentation in Universidad Nacional del Litoral, where we explained some concepts related to developing web applications using the latest version of the Finnish platform.
We started explaining what it means to develop a client-server application nowadays, and then some key features of the platform, like the lack of need of browser plugins and the fact that it is completely open-source.
Then we introduced Web Components, a key technology, that is the ground base for the good looking components that are built-in in the platform. Also some introduction for Polymer Project. For more information about these technologies, we recommend reading about it in the WebComponents official site, the Polymer Project official site, and also at Vaadin's site.
Then we started talking about Flow, the Java API for creating modern web-apps using Vaadin's components in the client side. We showed some small examples covering the most significant features like server side DOM manipulation, routing, data binding and synchronization.
If you want to learn more about Flow, the official documentation site is a good place to start.

Students at Universidad Nacional del Litoral


Finally we developed a small application using Flow, showing how easy is to create a good looking web application that can edit data from a back end using Grid, one of the most advanced components.
After the speech, the students were interested in knowing more about the framework and some real life examples. So we decided to upload to GitHub the application that we developed in front of the audience. We added some tags that show each step in the process, feel free to download the sources and try modifying it to cover other use cases!

Lot of questions!

We also recommended another article that we wrote, telling the main steps for developing a complete application that covers how to invoke external REST APIs from the server side.
The experience was great and we found a lot of interest in the framework, so probably we are going to repeat the presentation again soon in another place.
Keep in touch with us for updates!

Javier explaining Flow basics


Our Services


Development
Enterprise Application Level

Java development for your company's needs.

Outsourcing and Projects Get in touch
Consulting
Architectural and Design support

Team of high qualified engineers will help you build your software infrastructure.

Outsourcing and Projects Get in touch
SCM
Build pipeline definition

We'll help you define how your build your software in an industrial level.

Consulting Get in touch
Open Source
Community driven development

Checkout our projects at GitHub. Be part of our community.

Contribute Get in touch

Contact Us


Flowing Code S.A.
Boulevard Galvez 1933 - Oficina 3 - Santa Fe
Santa Fe, Argentina
+54 342 4123621
[email protected]



Interested for our works and services?
Get more of our update !