DATE: Thursday the 17th of March.

The attendees will learn how to create React web applications with an amazing look & feel using HTML5 Canvas, CSS/LESS and smooth Javascript animations. The goal of day will be the creation of an interactive dashboard to visualize, collect and send data to an emulated home automation system.

Take a look to the Special Package:
“1 Workshop + Conference Ticket”: we offer 15% DISCOUNT on the total price!
Click here to know how to obtain these discounts.

LANGUAGE
Italian

LEVEL
Beginner

DURATION
The workshop is full-day (8 hours) from 9:00 to 18:00, with one hour lunch break.

CHECK IN: 8:30 – 9:00

LOCATION
Centro Congressi Cavour
Via Cavour, 50/a – Roma

PRICES:
Every 8 hours workshop’s ticket is fixed:
– to 125 € from the beginning of the sales till the 18th of February;
– to 160 € from the 19th of February till the 10th of March;
– to 190 € from the 11th of March till the end of sales.

Take a look to the Special Package:
“1 Workshop + Conference Ticket”: we offer 15% DISCOUNT on the total price!
Click here to know how to obtain these discounts.

FABIO BIONDI and MATTEO RONCHI
Fabio Biondi and Matteo Ronchi are active contributors in the italian front-end community both with 10+ years of experience in developing enterprise level applications. Their knowledge ranges from custom user interfaces to cross-platform interactive applications, mobile hybrid Apps, data visualization, home automation systems and smart cities. Especially focused in front-end apps and all related aspects both visuals and architecturals, they excel on cutting-edge libraries and frameworks offering training, development and consulting on AngularJS, React, D3, and several other technologies.

ABSTRACT
React is an amazing Javascript library developed by Facebook to create data-driven web applications. During the workshop we’ll explore React main features creating the user interface of an interactive dashboard controlling an emulated IoT home automation system.
After the basics we’ll introduce the concept of one-way data flow in React with the new features of Javascript (ES2015) and Webpack.
Several cool Javascript libraries – CreateJS, GSAP TweenMax, HighCharts – and technologies like HTML5 Canvas and SVG will be used to produce an amazing look & feel.

TABLE OF CONTENTS
The workshop will guide the attendees through four stages of exercises. Every phase will starts with basics theory followed by guided practical applications. Most of the required code will be already in place letting the participants focus only on React and on its core concepts.

1. BASICS
Learn the basics of React and Webpack creating the starting point for the application:
– configure the environment and create the scaffold with Webpack ES2015 and React
– React fundamentals:
– transfer props to components
– render function
– component’s life cycle
– handle props defaults and validations

2. COMPONENTS
Create reusable components in React using Javascript ES2015:

– stateful vs stateless components
– manipulate the DOM in React
– create dynamic lists and data-driven components
– communication between components
– parent-child communication
– sibling components communication
– forms in React

3. ENHANCE THE LOOK & FEEL
Theory and techniques to improve the aspect of React components

– inline styling and dynamic CSS in React
– load CSS and LESS with Webpack
– use 3rd party React components (developed by the React community)
– wrap non-React libraries in custom components
– smooth animations with TweenMax
– data visualization using HighChart
– short introduction to CreateJS and HTML5 Canvas development in React

4. SERVER SIDE INTEGRATION
Basics of client/server-side integration:
– One-Way Data Flow
– Working with REST API

TRAINING OBJECTIVES
– understand the basics of React
– create reusable components
– introduce Javascript ES6 and Webpack
– enhance the UI with effects and animations
– working with REST API and one-way data flow

WHO THE WORKSHOP IS DEDICATED TO?
Expert web developers (in any language) that want to start using React, Webpack and ES6 to build data-driven web applications. Particularly indicated for AngularJS developers that need to quickly jump into the React world.

PREREQUISITES NEEDED FROM ATTENDEES
Working knowledge and practical experience in any programming language. Knowledge of basics HTML and CSS is not required but preferable to augment the learning experience.

HARDWARE AND SOFTWARE REQUIREMENTS
OPTION 1
Attendees may choose to use their laptop with following installed software:
– Google Chrome with React Devtools installed
– Text Editor or IDE (SublimeText 3 / Atom / VIM / Webstorm / VS Code)
– NodeJS (https://nodejs.org), version 4.2 or greater
– Git  (https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
Before the workshop the attendees will receive instructions to clone a git repository and install its dependencies.

OPTION 2
Alternatively only latest VirtualBox must be installed. VirtualBox is required to install a pre-configured VM with complete setup to support all the workshop activities.
Before the workshop the attendees will receive the link to download the VM image.

WARNING:
Seats are limited.
The workshop will be held only if the minimun number of attendees is reached.

Take a look to the Special Package:
“1 Workshop + Conference Ticket”: we offer 15% DISCOUNT on the total price!
Click here to know how to obtain these discounts.