Myth 3: Creating UIs is hard
We often hear this from native developers that don't know very well the web platform and its latest powerful features: creating UI and even more, beautiful UI, is hard. I've been doing XAML in the past to build Silverlight, WPF and UWP applications and really loved it, even if the learning curve could be high. I truly also love the web platform offering very efficient and simple to use UI components. It's just a matter of spending a bit of time learning CSS correctly.
First, if you're coming from a XAML world or a similar UI XML layouts like the one on Android, you'll be glad to know that CSS Grid
(inspired from XAML) and CSS Flexbox
are now fully supported in all modern browsers
and can be used safely in production. These are the new the core basics to describe your UI and to implement responsive design in an easy way. You'll find some interesting articles explaining how to combine those 2 CSS features:
But what about the ready-to-use components to inject into those flexible boxes and grid elements? During the last years, we've seen many approaches inspired by the web components principles to create UI controls in a very clean & reusable way. One of the most popular one is probably React. For instance, if you're wondering how we're creating the UI/UX on our big popular web office apps, have a look to Fabric UI
. Fabric UI is built on top of React to provide you sophisticated ready-to-use components such as the People picker
, a Nav menu
and many others accessible from only a few lines of code. You'll find plenty of similar other frameworks available such as Ionic
by searching on the web. I already talked about some of them in my previous article: 4 ways to create cross-platforms apps using web technologies
Going a step further is by directly using the standard Web Components built in recent modern browsers. Web Components enable component-based markup across frameworks
, and x-tag
to manage a fallback via polyfilling.
Let's see a small simple sample of a basic web component. Here's the script to declare your new web component:
And you'll obtain this:
I encourage you to read more about this on MDN: Web Components
We decided to use this technology, supported by lit-element for the polyfilling, to create our new Microsoft Graph Toolkit
. It's a collection of web components to easily connect to the Microsoft Graph
using a few lines of markup. Look at this small JSFiddle sample to better understand how this works:
I really love this simple but efficient approach. Feel free to have a look to the project by the way and don't hesitate to submit feedback and/or contributions.
Well, again, it looks like that this myth sometimes believed by native developers is…