3rd Developers@CERN Forum

13 Feb 2017, 14:00 → 15 Feb 2017, 18:00 Europe/Zurich

31/3-004 - IT Amphitheatre (CERN)

It's about U and I !

 

The Developers@CERN Forum is an event by developers, for developers, aimed at promoting knowledge and experience sharing.

This edition will take place at the IT Amphitheatre, on the 13th, 14th and 15th of February afternoons. It will consist of a series of short presentations and workshops. The topic for this conference will be Frontend & User interfaces.

Have you got an idea for a presentation or workshop? Then, tell us about it (deadline on 27th of January).

Registration will open in November. Please subscribe to developers-forum-announce@cern.ch mailing list for further information.

This event will be made by developers for developers. We are counting on your presence, but also on your contributions!

To learn more about the initiative, read the CERN Bulletin article.

Organization

You can get in touch us at developers-forum-organizers@cern.ch.

Announcement mailing-list

Poster

Recording

Recordings

Monday, 13 February

1 How to make your development process user centred

I’ve been designing and managing the development processes of websites and applications for companies since the 90s. In those years I’ve seen a lot of projects fail. The biggest issue: development teams prefer to spend the majority of their time in their cave behind their screens and clients stay in their ivory tower. This means that software is developed based on assumptions and personal taste. I’ve been to way to many meetings where arguments were leverages with ‘I don’t like this’ or ‘I think the user doesn’t want this’.

During this presentation I will show the steps that should be taken to avoid all these issues and make a product that does bring the business objectives and the user’s desires together and is optimised for the real end user thus creates a usable product.

Speaker: Bas Wallet

Dev@CERN - Process.pdf

Recording

2 Indico front-end: From spaghetti to lasagna

We will present how we transitioned from legacy spaghetti UI code to a more coherent, easier to understand and maintain ecosystem of front-end technologies and facilities with a strong emphasis in reusable components. In particular, we will share with you: 1) how we use Sass to maintain our home-baked CSS, 2) how we survive in 2017 without front-end Javascript frameworks, and 3) how we use template macros and WTForms for generating consistent HTML transparently.

Speaker: Alejandro Avilés (CERN)

indico-front-end.zip

Recording

Slides

3 The messed up story of U and my X

User experience (UX) is hard. Hard to comprehend, implement and plan efficiently but very easy to underestimate or worse, ignore.

The talk will focus mainly on the importance of the user-centered interface development and the logic behind it. We will discuss the reasons why UX is not a simple concept for developers but also ways to accomplish a pleasant user experience with no nitty-gritty details about the implementation. We will also look into some common mistakes and things to remember before implementing a new app or feature or refactoring existing ones.

Lastly, I will talk about my experience in developing web applications targeted to CERN users and the lessons I acquired regarding the design of user interfaces in the last 4 years.

Speaker: Ilias Trichopoulos (CERN)

Recording

slides.com

ux.pdf

15:15 Coffee Break

4 Building progressive web application in Angular 2 and Zurb Foundation 6

I am responsible for design and development new progressive web application for CERN's Access Distribution and Management System (ADAMS) in BE-ICS-AC. The application is to be used both by the access control professionals and by end users. It also must work regardless of the browser used, fit any form factor (like desktop, mobile, tablet), be accessible on low quality networks and make the users feel that they are using an application and not a website.

I would like to present to audience:

• what are progressive web applications
• what is Angular 2 framework and why it is better than AngularJS
• why we could build components and how to do it
• how to use TypeScript, webpack, gulp
• how to build modern responsive website in Zurb Foundation 6
• using Angular 2 and Ionic 2 for building a hybrid mobile application

I can also prepare workshops how to create basic application in Angular 2 and Zurb Foundation 6 in 1h.

Speaker: Michal Piotr Rafalski (Ministere des affaires etrangeres et europeennes (FR))

Building progressive web application.pdf

Recording

5 Next generation Zero-Code control system UI

Developing ergonomic user interfaces for control systems is challenging, especially during machine upgrade and commissioning where several small changes may suddenly be required. Zero-code systems, such as Inspector, provide agile features for creating and maintaining control system interfaces. More so, these next generation Zero-code systems bring simplicity and uniformity and brake the boundaries between Users and Developers.

In this talk we present Inspector, a CERN made Zero-code application development system, and we introduce the major differences and advantages of using Zero-code control systems to develop operational UI.

Speaker: Valter Jose Correia Costa (Ministere des affaires etrangeres et europeennes (FR))

Recording

Zero-Code_UI.pptx

6 Maintainable CSS with visual regression testing and functional CSS

Maintaining CSS is hard. Once your CSS files grows big, they become full of duplicated rules and unused code.
What can we do to solve this problem?

In this talk I will describe two concepts that can help us writing maintainable CSS:

• Visual regression tests that can help us refactor our CSS with confidence
• Functional CSS - a different way of writing CSS that can help us produce more maintainable code in the long term

Speaker: Sebastian Witowski (CERN)

Recording

Slides online

Slides.pdf

Tuesday, 14 February

7 Usability testing for dummies

Usability testing seems complicated and time-consuming. Is it though?

In fact, it is the best way to understand how real users experience your product.
In this interactive session, we will do a live usability test and you will get advice on how to conduct your own usability tests.

Speaker: Stella Christodoulaki (CERN)

Recording

Usability Testing.pdf

8 Bringing realtime media capabilities to your interface with WebRTC

WebRTC provides a simple API for web browsers and mobile application to enable Real-Time Communications (RTC) in your application.

In this talk we explore the technology roadmap, an overview of the main API functions and the elements needed to establish a peer-to-peer communication between two clients.

Speaker: Francisco Valentin Vinagrero (CERN)

BRINGING REALTIME MEDIA CAPABILITIES TO YOUR INTERFACE.PPTX

Recording

9 Life after the MVC

Write scalable, predictable and easy-to-debug web applications with Redux.

Speaker: Harris Tzovanakis (National Technical Univ. of Athens (GR))

3rd-developers-forum.pdf

Recording

15:15 Coffee Break

10 LANDB Portal redesign process (old network.cern.ch)

An in-depth presentation of all the steps that were followed for the redesign of our current network.cern.ch website application to the forthcoming LANDB Portal.

Speaker: Danai Andriopoulou (CERN)

04 - LANDB PORTAL REDESIGN Danai Andriopoulou.pdf

Recording

11 How we are building a complex Angular 2 application at Inspire

In this talk, at first we will talk about some basic and advanced Angular 2 concepts, then we will share our experiences with Angular 2 that we had so far while building a complex library and web applications at Inspire.

Speaker: Javier Martin Montull (CERN)

Angular 2 client application using our ng2-json-editor library

Angular 2 library for JSON editing

inspire-angular2.key

inspire-angular2.pdf

Recording

12 UX concepts, how they affected our development flow.

The Locations application has been the first in our Section (FAP-AIS-GI) in which some proper UI/UX concepts have been taken in account during the early phases of the development. This led to a change of the development flow by adding the UX designer to the core of the development phase.
The talk aims at showing the development of Locations before and after this moment, and how the way of thinking at the application changed for taking in account the improvements in the user experience of the application.

Speaker: Matteo Mara (CERN)

Dev@CERNPresentation.pdf

Dev@CERNPresentation.pptx

Recording

13 Most common usability mistakes coders make

This presentation contains an overview of bad practises in interface design. Though real-life screenshots elements like ‘setting up your page’, ‘forms’, ‘navigation and interactions’ and ‘colours’ will be covered. It’s easy to point out the negative aspects so a solution on how to make the examples will be given in addition.

Speaker: Bas Wallet

Dev@CERN - Examples.pdf

Recording

Wednesday, 15 February

14 Kickstarting your web-app with a tasty recipe

In this talk, I'd like to give some insights on my journey to create this application, some comments on my experiences/experimentation with angular 2 and also introduce this very handy, tailor-made for use in CERN, project to the world.

Speaker: Nikolaos Papapetrou (National and Kapodistrian University of Athens (GR))

Recording

The repository of the application

The slides

15 Building an app with Angular 2 and Typescript

In this workshop we will do a brief introduction to Angular2 and build an example application that will show case many of Angular 2 features.

Speakers: Zacharias Zacharodimos (National Technical Univ. of Athens (GR)), Harun Urhan (CERN)

Recording

Workshop App Repo

15:15 Coffee Break

16 Progressive Web applications

Progressive Web Applications are native-like applications running inside of a browser context. In my presentation I would like describe their characteristics, benchmarks and building process using a quick and simple case study example with focus on Service Workers api.

Speaker: Wojciech Kulma (University of Vienna (AT))

03 - Wojtek Kulma PWA and Service Workers.pptm

Recording

17 FESA Graph Editor

The Front-End Software Architecture (FESA) framework, is a comprehensive environment developed at CERN, for equipment-specialists to design, develop, test and deploy real-time control software for front-end computers. Based on an XML-design-document that is being validated against a FESA XML-schema to enforce all FESA-design-constraints, the framework can automatically generate C++ source code of which the developer only needs to implement some well-defined methods. Depending on the equipment and measuring system, an XML-design-document can grow in complexity making the overview of the SW from difficult to impossible. In addition, editing the XML document directly or by using the FESA’s design tool (eclipse’s plugin), can become cumbersome due to the intricacy of the framework. It is therefore essential to provide an interactive Graphical User Interface (GUI) where the FESA-design is represented graphically with blocks grouping the XML tags; and arrows depicting the logical linkage among them. This talk describes this GUI (FESA Graph Editor) and how it adds in the design and documentation process of a FESA-design-document.

Speaker: Athanasios Topaloudis (CERN)

FESA Graph Editor.pdf

FESA Graph Editor.pptx

Recording

18 Flexbox: The yoga of CSS

We will introduce flexbox, the single most valuable feature in CSS3 for elegantly solving page layout, vertical alignment, and many other typical nuances in web design. Now that flexbox is fully supported by all* browsers we at Indico are embracing its wonders to make our lives simpler and our CSS more predictable. We will share with you our findings, use cases, and examples, and, if you are down for some yoga, in the hands-on workshop you will learn how to use flexbox as we explore its different options.

Speaker: Ilias Trichopoulos (CERN)

flexbox.zip

Recording

Slides