Web applications UI
Matias Guijarro
BCU Day Out, 19th of November, 2015
![](https://s3.amazonaws.com/media-p.slid.es/uploads/331850/images/1953878/mobile-interface-animation6.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/331850/images/1413529/ESRF-Logo-RGB.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/331850/images/1413514/avatar.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/331850/images/1953947/dayout.jpg)
Raise of web applications
- Cloud computing
- Software as a Service (SaaS)
A paradigm shift
- Backed by industry giants (R&D investments + business)
- Professionalization: front-end developer vs. "web designer"
Technology evolution
- Since 2005: AJAX, "web 2.0", HTML 5
- ECMAScript engines
- web browsers as real development platforms
Serious biz
Why is it good for beamline control ?
Many benefits
- enforced separation between front-end (graphical) code and back-end (control)
- influence on work organisation (tasks dispatching)
Remote Access by design
No deployment cost
Better applications architecture
Multi-devices, multi-platforms, multi-clients
Many benefits (cont.)
- web browsers have *always* provided backward compatibility
- applications are self-contained (no external dependencies, self-hosted)
Long-term support
The best graphical design and user experience
- a lot of innovation both in term of UI and UX
- fancy look & feel
Domains of web applications within SW Group
Monitoring
Device control / testing
Data Analysis
![](https://s3.amazonaws.com/media-p.slid.es/uploads/331850/images/1966888/fisx1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/331850/images/1966892/fisx2.png)
- fisx (multilayer fluorescence)
- Tango dashboard
- XBPM
![](https://s3.amazonaws.com/media-p.slid.es/uploads/331850/images/1966958/xbpm_app.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/331850/images/1966966/tango_webdashboard.png)
Domains of web applications within SW Group
Configuration management
- MXCuBE 3 (in development)
- ISPyB
Experiment control and high-level user interface
- Beacon app.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/331850/images/1964689/beacon.png)
Which technology stack to rely on ?
Technology stack
- evolution of computing in general
- welcome change, flexibility regarding choices
- bye bye frameworks
No ever-standing / long-term silver bullets
My current tools for frontend development
![](https://s3.amazonaws.com/media-p.slid.es/uploads/331850/images/1967121/webpack.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/331850/images/1967129/react.png)
ReactJS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/331850/images/1967135/bootstrap.png)
Bootstrap
![](https://s3.amazonaws.com/media-p.slid.es/uploads/331850/images/1967139/jquery.png)
+ any library that get the job done:
dygraphs,
isotope, heatmap,
x-editable, ...
(depends on the project)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/331850/images/1967206/Babel.png)
Good times are coming
- web components !
Remarks / Problems / Ideas
- Should we invest more in web applications development as opposed to desktop (Qt) apps ?
- How do we see graphical applications @ BCU in 5 years ?
Decisions to take
- need professional know-how for quality UI
- required profiles: front-end developers, nothing to do with instrumentation or general software engineering
- can trainees help ? or CDD ?
- volunteer group members training ?
Lack of manpower
Organization
- assign *front-end developer role* in team of developers for a project
Web applications
By Matias Guijarro
Web applications
Web applications UI - for discussion @ BCU day out
- 829