Close

Vaadin Framework Video Tutorials

New developers coming to Vaadin usually start with the tutorial – it’s the best place to start your learning path from. But it’s even easier when you visually see somebody doing it – textual instructions are, at least to me, harder to grasp than, say, a video.

Videos provide an alternative learning source. Videos are an excellent learning resource for visual and auditory learners. Watching somebody doing the things inspires you and motivates you to try the things out for yourself.

We are accompanying the tutorial with a series of short videos demonstrating each step of the Tutorial. Now you can decide whether to read the tutorial, watch the videos, or even do both. The video tutorials are directed at Java developers with no previous experience with Vaadin and to those willing to brush up their Vaadin knowledge.

Additionally to the Vaadin Video Tutorial series, we also have Vaadin Elementary School, a series of short, hands-on videos for Vaadin Elements; and UX Tips, also short and to-the-point, explanations on how to achieve good User Experience.

We are continuously adding new videos to the channels. Stay tuned and make sure you subscribe!

Vaadin Elements in mobile apps

Vaadin Elements has been paving the way as the go-to UI components library for progressive web apps. But what about mobile apps?

To use Vaadin Elements in a mobile app, you need to have the same web view as you would have in the browser. Thanks to open source SDKs, like Ionic with Cordova, you can easily create a hybrid mobile app from your existing web app that uses the same web view as browsers. 

With a hybrid app you are no longer constrained by the limitations of the browser. You’re able to use native app features like camera and accelerometer access, but still write your app using web technologies.

Getting Started

The fastest way to start building mobile apps is to use the Ionic framework. Ionic is an open source front-end SDK for developing mobile apps with web technologies.

Install Ionic

First install Cordova and Ionic and then use Ionic’s command line interface to start a new app:

$ npm install -g cordova ionic
$ ionic start elementsApp blank

This creates an elementsApp/ directory, which contains your Ionic project. Try out your app by running ionic serve from the elementsApp/ directory: 

$ cd elementsApp
$ ionic serve

Browse to the Ionic's development server to check your app:

Install Vaadin Elements

Install Vaadin Elements with bower. Vaadin Elements will be installed to the www/lib/ directory: 

$ bower install --save vaadin-core-elements

Import Web Components polyfill

Not all browsers support web components natively, so you need to import the Web Components polyfill to the root of your app. Add the polyfill to index.html in the elementsApp/www/ directory:

<script src="lib/webcomponentsjs/webcomponents-lite.min.js"></script>

Import Vaadin Elements

Import Vaadin Elements in index.html in the elementsApp/www/ directory: 

<link rel="import" href="lib/vaadin-core-elements/vaadin-core-elements.html">

Now you are ready to use Vaadin Elements in your mobile application.

Start coding!

Add Elements

Start by adding a few Vaadin Elements inside the body of your index.html. You can seamlessly use Vaadin Elements together with Ionic’s native UI components.

<body ng-app="starter">
   <ion-pane>
     <ion-header-bar class="bar-stable">
       <h1 class="title">Game of Thrones houses</h1>
     </ion-header-bar>
     <ion-content>
       <div class="filters">
         <vaadin-combo-box label="Region"></vaadin-combo-box>
       </div>
       <vaadin-grid>
         <table>
           <colgroup>
             <col name="name">
           </colgroup>
         </table>
       </vaadin-grid>
     </ion-content>
   </ion-pane>
 </body>

Add Business logic

The next step is to show some data in our application. Wrap your business logic inside an HTMLImports.whenReady event callback to make sure that the elements are ready to use. In this example we are using An Api of Ice and Fire to populate vaadin-combo-box and vaadin-grid.

 
<script>
     var grid = document.querySelector('vaadin-grid');
     var combobox = document.querySelector('vaadin-combo-box');
 
     HTMLImports.whenReady(function () {
 
       updateHouses();
 
       // Add items to combo-boxes
       document.querySelector('vaadin-combo-box').items = ['Dorne', 'The North', 'The Riverlands', 'The Stormlands', 'The Vale', 'The Westerlands'];
 
       // Update grid items when combo-box value changes
       combobox.addEventListener('selected-item-changed', function(event) {
         updateHouses(event.detail.value);
       });
     });
 
     // Add items to vaadin-grid
     function updateHouses(region) {
       region = region ? region : '';
       getJSON('http://www.anapioficeandfire.com/api/houses?region='+region, function (json) {
         grid.items = json;
       });
     }
</script> 

Conclusion

Vaadin Elements and Ionic both use Bower so it’s easy to extend an Ionic app with Vaadin Elements. The responsive design of Vaadin Elements makes it a favourable choice when selecting the UI components for mobile apps. In addition, the material design fits nicely with the CSS components of Ionic.

See the complete source code on GitHub

Working at Vaadin - Empathy and Photography

This time in the “Working at Vaadin” series we’ll meet Mr. Johannes Tuikkala. Johannes has been part of the Vaadin crew for eight years, having worked in various large customer projects and is currently helping our customers in the support and maintenance team. Johannes is always a positive sight at the office and respected by all others as a considerate colleague.

How did you end up at Vaadin 8 years ago and what do you do today?

I was introduced to Vaadin by my colleague at the university - he recommended that I apply to Vaadin. I eagerly wanted to learn things, and so far I’ve been involved in both internal as well as external projects, starting from our internal work hour system to currently maintaining one of the largest maintenance projects we have with a pulp and paper chemicals industry provider. I also do sales support so I would say that my role and job description is fairly broad.

What is your typical day like at Vaadin?

My typical day is very dependant on the week and the project at hand. I handle priorities within the maintenance backlog, fix bugs and create new features for our support customers. Our support role is very variable so one week can be just fixing bugs or consulting the customer (e.g. improve their web app’s scalability) and another week can be building a new component or part of the UI to a project. This is all dependant on what support requests we get. I’m personally mostly interested in scalability issues and performance, so when those kinds of tickets arise, I’m always happy to do them.

What skills are the most important for somebody wanting to join Vaadin?

I would say that problem solving skills are the most important asset that I possess - this is a skill to find a solution and see the best possible outcome for the problem at hand. I’d also like to think that I have the capability to listen to the customer’s needs and find a solution that fits them better than a stock-solution. A bit of empathy might be a benefit to understand the stress of the customer when, for example, their end user requirements are exceptionally tricky and the production time is soon upon us.

What is the best thing about working at Vaadin?

I like the freedom of working - I can choose my working hours flexibly. My team mates are the best and I have a very supportive team lead. I think that open source is nice, and the opportunity to do my own projects during working time (Community Friday projects) is amazing. Vaadin has given me the opportunity to own a small part of Vaadin as a company and it is rewarding to see Vaadin succeeding after all the hard work and years. I really want to see what we can achieve in the future.

Besides work, I’m sure there are other things as well – what do you do in your free time?

Photography is the thing closest to my heart. I mainly take pictures of nature, from small bugs to deer and from starry skies to handsome landscapes. The closeby nature intrigues a lot and there are some nice natural reserves close to our Turku office. It’s great to see and find the beauty of nature so close to you.

You can take a closer look at Johannes’ photos at https://www.instagram.com/tuikkalaj/ and for our open positions check out https://vaadin.com/jobs