Advanced UI Patterns
SILK UI
This lesson is part of the Developing OutSystems Web Applications course.
LEARN MORE

Transcript
Hello and welcome to designing interfaces using the Silk UI Framework.
Before we get into the specifics of Silk it's important to first understand the
underlying philosophy of taking a Style Guide driven approach to interface
design. This paradigm states that you should first start by creating a Style
Guide that describes how a certain brand, how certain company's brand, should be
communicated. This Style Guide is not specific to software development but
rather it dictates how is the look-and-feel of all the touch points of
a certain company, for example the heading of the paper etc. This then trickles down
to the definition of the look-and-feel of the applications of that corporation,
and once you define this overall theme of the company it is then possible to start
identifying what is the look-and-feel and what are the patterns that make up
pages of applications of this company. This upfront approach to UI creation
has many benefits. For example you can centralize the knowledge of CSS creation
and increase the uniformity of the look-and-feel across multiple
applications. Now, Silk UI fully realizes this paradigm by changing the
somewhat common approach of making up UI as you go, to this upfront centralized
design. Silk UI bundles inside it a collection of base themes that you can
use, a set of modern UI patterns that you can also use to build your screens, and
optimizations that go beyond what we normally do in web applications. To get
you started with Silk UI Web development you need to have in your
server at least the base Framework and one or more templates. There's other
support downloads that you can get from Forge that will help streamline your
development by providing you samples. Each template bundle is actually made up
of two components: a theme and a template module. The module is nothing more than
your blank module, that is already
pre-prepared to use the associated theme.
Once these templates are installed in your server, when you start the project
you pick a template for your app. In the screenshot we can see a server that has
multiple themes installed. It's worth noting that the web application theme
you see in the top left corner is a standard responsive theme based on
London and it's not actually one of Silk UI themes. From the OutSystems
Forge you can obtain many themes that will have specific aesthetics and target
devices. The examples shown here are Dublin, Lisbon, Liverpool and Vanilla.
In previous versions of the platform OutSystems also made available the Tokyo
theme, but this is now deprecated because you're better off creating an OutSystems 10
proper mobile app. Once you have started a new application and picked the
appropriate template / theme the process of building the screens is a much more
modularized approach than on classic Web page development. You assemble your
screens by slotting together patterns of several kinds, some larger and more
structural, and some more akin to widgets. This approach yields huge benefits in
terms of development time and visual harmony across your application. So let's
look at some of the stuff that you will see inside Silk UI Web. First you will
find the aforementioned structure patterns. They define an overall column
layout and how the screen should behave and should split for different device
types and sizes. As we can see in the example, if you use the structure of two
columns, which will have two placeholders, you can state, in the tablet and in the
phone, how these panels should be split if there is not enough screen estate.
So, if the columns cannot all fit side-by-side on your device, you can opt
to break at every column, on the first, on the last, don't break at all and enforce
the scaling, or just break in the middle
of whatever number of columns you're using. There are also responsive patterns
that define the visibility and behavior of certain panel, certain areas of the
screen, for different device types. In the example shown on the right, you can state
that a certain area will be displayed on desktop only, on desktop and tablet,
and so on. This is just one of the responsive patterns available. You can
opt load certain areas only when they become visible, select a specific image
depending on the device type, force a table records to pre-expand certain
sections if accessed on the phone, and also opt to have sections pre-collapsed or
expanded depending on the device.
There is also a set of actions and functions that will allow you to tweak
the code on the server side to adapt your logic depending on the device. It's
worth noting that these functions only return meaningful information after the
first request, because that's when the platform has obtained information about
the device connecting. And this was just the scratching of the surface of all
that's available in Silk UI Web. There's actually tons of other patterns
that you can look into, in the dedicated microsite that OutSystems has available
for you. In closing I would just like to reinforce the benefits, other than the
huge selection of patterns that we've discussed, that Silk UI has over the
standard responsive Web application theme you've been using so far. For
starters the responsive behavior in Silk UI is actually implemented on the
server side so the page rendered and sent to the device is already fine-tuned to
the device. The code knows the device and can act accordingly.
This provides a much simpler and faster client-side experience and if you
introspect the CSS of Silk pages you will notice that there's no media queries in
the CSS because all of the responsive is handled server side. And this is the
Style Guide driven approach and Silk UI in a nutshell.
Silk UI is a product in and of itself,
and there's a world of benefits once you start using it in your applications.