Frontend trends from OutSystems Developers Conference
Or how I like to call it — 2018: The Year We Made Contact!
If you have read my last article, you probably remember that I made a comparison to 2001: A Space Odyssey and ended with a cliffhanger, about what the next step of my evolution would be!
Well, it’s only fitting that I use the sequel to that movie — 2010: The Year We Make Contact — to tell you what happened next!
Why is the movie relevant you may ask? Because the OutSystems Worldwide Developers Conference happened, and for us it was the year we made contact with our users, the developers that use the platform everyday.
For me, I was given the opportunity to be one of the speakers and, as you can imagine, this was another personal great step. In fact, I tentatively call it my second ODC (Ha! See what I did there? Nevermind…).
So, for those of you who couldn’t attend the conference, I thought about making a list with the top frontend trends talked about, which also reflect the main features of the new OutSystems UI.
Variables! Variables everywhere!
CSS obviously represents a large part of any frontend framework, and OutSystems UI is no different. Actually, one of the main reasons we wanted to build a new one, instead of continuing to improve SILK, was so that we could start from scratch and have OutSystems frontend side by side, with state of the art tools and methodologies, namely — CSS Variables, Flexbox and BEM.
These were big changes, not only on our side, as we can build better, faster and more maintainable patterns, but they also have more extensibility on the developer side. All patterns have an ExtendedClass parameter, that you can use to set a class to his parent element. This is very useful, if you want, i.e., change some basic styles, using our Utility Classes, based on CSS variables (that you can also change), or even to use your own and style the whole pattern, using your custom CSS.
This is now easier, as we use BEM (Block Element Modifier) to define the names of our classes, so you know what to expect just by looking at the HTML structure of the pattern. On top of that, as we use Flexbox, overwriting our rules is also more straightforward. Imagine you want to change the orientation of a pattern or the alignment on a certain placeholder, you can easily do that with one or two css properties.
If you want to learn all about this, check José Rosário’s presentation — Hardcore CSS Made Easy!
A guide in style!
Speaking of customisation, Samuel Jesus on his presentation, made it pretty clear how important it is to have a Style Guide. This is something that Hi Interactive has been saying and doing for quite some time, to the point of being experts on it.
Style Guides are essential, if you want to have design consistency across your applications (on both UI and UX) and provide a common and equal ground, for designers and developers to interact, continuously improve and work on.
But for it to be efficient and maintainable, it needs to have the correct architecture. This normally implies an application at the base of your factory, with four modules — Template, Theme, Styleguide and Resources. If you don’t know how to begin, it’s ok, OutSystems will be providing this base structure on Forge, as an bootstrap accelerator for your styleguide architecture.
Still not convinced? Check the article from our team leader, David Marques, about Live Style Guides. You can thank me later!
Design System by default
But without a Design System to support the Style Guide, you end up with just a Pattern Library. Probably a consistent one, but lacking the design standard rules that, when assembled together, make any application an coherent extension of your brand.
Sara Gonçalves and Ricardo Alves, talked about this, Accelerating UI Development, Atomic Design, Screen Templates and even The Theory of Everything. Ok, maybe not the last one. But they were able to show OutSystems at an atomic level, making a very cool parallel with Brad Frost’s methodology!
OutSystems UI provides you an Design System by default, that dictates the styles and behaviors of the UI patterns. And is then materialized on the new Screen Templates. These are ready-to-use screens, that you can adapt to your own needs, using the Replace Data feature, making it a great UI development accelerator!
If you want to learn more about the development of these screens, check Dinis Carvalho’s article.
Javascript to the power!
Rita Dias gave a great talk about Javascript! You learned that OutSystems UI Web no longer depends on jQuery library, making everything faster, cleaner and bulletproof to the future.
But perhaps the topic that stood up the most, was the extensibility provided by Javascript. Being through the use of abstracted functions, transformed on server actions, to set some interactions and behaviors on certain patterns (like the Carousel). Or the fact that every pattern on OS UI Web, that uses a library (like the Range Slider), has the AdvancedFormat parameter, which gives the developer full access to everything that library provides, and not just the available parameters!
Another great feature, it’s the new version of the Device Detection. It’s now client-side, injecting CSS classes to the body element (based on browser, operating system, orientation and device). This is a great tool to define the responsive behaviour of OS UI patterns and even your own custom CSS!
Desktop first, made easy!
Speaking of which, myself in person, talked about Responsive Patterns. Aside from the dad jokes (if you were there, sorry for that), I focused on showcasing how the responsive behavior is handled on OS UI. Either through the default rules we provide out-of-the-box or, on top of that, the customization available on the patterns, using parameters.
These parameters range from defining breakpoints for tablet and phone, to changing the behaviour completely or moving elements to different parts of the screen, based on device.
And that, is how you can stop worrying and just forget about mobile first. Let’s be honest, you never did it anyway.
With OS UI, you can now do what you always do, which is make the screen pixel perfect (I hope) on desktop, and then use the available parameters to improve or customize the default behavior. Simple as that!
Accessibility
Ah, this is a great topic! Everyone learned something new from Bruno Marcelino’s talk. I didn’t know, but almost ⅕ of the global population has some kind of disability. Yap, that’s right, it’s a lot!
After spending a lot of time on research, accessibility was implemented on the new OS UI. It should be noted, you still need to do some work on your side to reach AAA evaluation, but the main goal was that the OutSystems platform couldn’t represent any roadblock to achieve that level.
This means, that layouts (TopMenu and SideMenu) and every pattern available on the framework, have the necessary aria-roles defined, keyboard navigation and readability from screen-readers!
iPhone X ? Yes. Because, why notch?
Last, but not least, the talk from Glauber Corrêa (the terrible pun above is his, by the way), about how OS UI solves the notch problem (yes, I chose to call it a problem).
Basically, it applies padding accordingly, based on environment variables (safe-area-inset-position), which define the safe area of display (the one that is not affected by the notch). On top of that, it uses the Device Detection to identify the iPhone X and set a class on the body, which allows the creation of some custom CSS rules.
Long story short, the problem is dealt with and the framework supports the iPhone X out-of-the-box!
Long live OutSystems UI!
As a recap, OutSystems Worldwide Developers Conference was a huge success, and a great opportunity to interact with the users, and to gather feedback on the product. There were more than 50 talks at the venue, ranging from different parts of the platform.
This article served to highlight some of the frontend related ones:
- The new CSS tools
- The importance of a Style Guide
- The trendiest of them all (Design Systems)
- The power of Javascript
- Responsive Patterns
- Accessibility
- IPhone X support
There is still much to talk about the new OutSystems UI framework, but the most important is that the foundation is very strong. Together with the new Screen Templates, there’s never been so fast to create applications, with great UI and UX by default. If you need to improve on that, just drop us a Hi ;).
