
ING open-sources Lion, a library of accessible and flexible Web Components - d4kmor
https://medium.com/ing-blog/ing-open-sources-lion-a-library-for-performant-accessible-flexible-web-components-22ad165b1d3d
======
Ruphin
In case anyone wonders if this is actively beig used, Lion currently powers
the internal ING web component library that applies our own design system on
top. It is the foundation of the "next generation" web platform for all our
web programs internationally. In some countries, it also powers our mobile
offering through webviews/Cordova.

Many hundreds of web developers at ING use it for their projects, and all
active web development is using powered by it. Lion is a core component of our
web strategy. At this time, over 10 million customers are using products built
with it, on a daily basis.

~~~
ktpsns
Hi Ruphin. I guess you are a developer at ING -- may I ask you something Off-
topic?

I have a simple giro account at ING and just would like to query the balance
regularly with a script. Nothing fancy at all. Is there some API you offer?
I've seen your website
[https://developer.ing.com/](https://developer.ing.com/) but it seems that
developer access is only intended for developing activities and not intended
for "productive" usage, even if it is with the giro bank account of the
developer.

~~~
babelabout
Hello ktpsns! Many thanks for your feedback on
[https://developer.ing.com/](https://developer.ing.com/). For the moment, the
"Account Information API" is indeed only available to companies with a PSD2
license. But, there are discussions to open the API to individuals so they can
programmatically consult their accounts only.

Do not hesitate to post this question/request as a suggestion on the website,
[https://developer.ing.com/openbanking/support](https://developer.ing.com/openbanking/support)

~~~
Rainymood
Yes! Please! I sent an email on the 27th of October 2019 with exactly the same
request to dev portal at ing dot com. Definitely want this!

------
spankalee
This is the first truly white-label web component set that I know of. It's
intentionally not a design system, and looks pretty ugly out-of-the-box until
you customize it with your own styles.

I think it's a really interesting approach, and has the possibility to be a
Bootstrap-like foundational layer.

I work on lit-html and LitElement, which Lion uses, and we're working on new
userland theming systems (and standards too) that will make using and theming
a set like this easier.

------
skrebbel
It's an impressive sign of the times that a traditional bank publishes free &
open source software. Banks are extremely risk averse by nature, and
publishing open source is risky in all kinds of ways.

What if a developer copies&pastes some GPL code? What is some open source dev
work gets done on a big project billed to a client? What if an external
contributor contributes some code that gets merged, but it turns out to
contain an obfuscated backdoor and this ends up inside our online banking
apps? What if a company uses our open source code and it's broken and they sue
us? (they'll have no leg to stand on, but it's still a worry for management
not used to open source).

Really there are all kinds of complicated stories (sensible and not) about
ownership and responsibility that need answering before an organisation like
this will give off the green light to publish open source. I bet this was not
a few developers asking the boss and the boss going "oh yeah sure, go ahead".
Hats off.

~~~
pierre
I went through the hoops of open sourcing some code in a global 50 company.
The development team push for it restlessly for a year. The reality is that
the culture in not there yet and I had to go through security, compliance and
legal. We had to rewrite some code as one of our apache 2.0 dependency had
some GPL dependencies.

We finally get the go when we cornered an exec during an off site event and he
finally agreed to let us do it.

Big company are unfortunatly not ready by default to contribute back, it s not
in the culture, and you get pushback from internal IT team thinking the code /
architecture / documentation is not good enough yet to open source (hint : it
never is) once you have clear the compliance / legal / branding / security
side of things.

Hats down for the tech lead / dev / manager that convinced ING to open source
this one. I hope that getting in front of HN will allow the dev team to get a
little more budget to maintain this project a little longer.

~~~
DangerousPie
Given the amount of work and legal risks involved do you really blame them for
being reluctant though? How many man-hours were spent on sorting out all the
legal issues, doing the rewrites you mention etc?

~~~
pierre
~6 man months in my case.

~~~
DangerousPie
Do you think the benefits of open sourcing will make that worth it? How?

I'm honestly asking, I'm curious how people do the cost/benefit analysis for
things like this.

~~~
pierre
Mostly worth it for the team. Its good to be working on opensource project
full time.

Also as an internaly, explaining this project have N star buy you political
capital and facilitate access to extra funding to pursue the project longer.

------
aphextron
The problem with Web Component libraries I've seen (including this) is that
the moment you use any external libraries, you lose the entire point of Web
Components. That is, to have fully native reusable bits of code that can be
built upon and used interchangeably with any other tech stack just like an <a>
tag or an <input>. As soon as you start using libraries with a build process
you might as well just use React or Vue or whatever else.

~~~
sime2009
Can you elaborate a bit on what you mean plz? What's the link between
"interchangeably" and having a build process?

~~~
aphextron
>Can you elaborate a bit on what you mean plz? What's the link between
"interchangeably" and having a build process?

My point is that as soon as you introduce a build process, imported
dependencies, etc. then you might as well just use React components. The power
of web components is that you can just drop them on a page and use them with
zero dependencies or proprietary APIs to learn.

~~~
benforreal
But a build process ensures you can use imported dependencies internally AND
use them with zero dependencies on your page (other than the JS component
definition itself). Even if you don't have a build process and just use ES6
modules, the Web Component manages its own dependencies such that you don't
have to worry about it (the only friction there being if folks use bare import
modules). Whereas with React components, you'll always be dependent on a React
runtime.

~~~
Vinnl
What happens when different modules register custom elements with the same
name?

~~~
d4kmor
There are various techniques you can apply in these cases. Like deduplicating
dependencies or apply a build/babel plugin that makes sure the names are
unique.

Imho scoping elements at the template/element level sounds more promising.
Here is an experiment archiving exactly this [https://open-wc.org/scoped-
elements/](https://open-wc.org/scoped-elements/) There are still some
improvements to be made but it's actively been worked on - so something lion
might consider in the future.

~~~
Vinnl
That's great, that would've saved us so much trouble back when I worked with
Web Components with many different teams. The problem it describes are exactly
what we ran into, and solution 2 was extremely painful in terms of overhead
and being demotivating:

> Synchronizing updates of shared dependencies - e.g. make sure Team Blue &
> Team Green always use the same version when releasing. This can be a viable
> solution however it comes with a high organizational overhead and is hard to
> scale up (for 10+ teams)

------
hncynic23
A financial institution doing something for free? what is this?

~~~
johannes1234321
They are not doing it for free

* They build it for internal use, primarily

* They use it for advertisment (hey ING bank would never be mentioned here otherwise)

* They can eventually use it for recruiting (send high quality PRs, they might like you)

* If they are lucky they get cheap bug fixes (not free, as review and community work costs time)

~~~
geofft
They also get to demonstrate their way of doing things in public, which in a
field as active and mercurial as frontend web development has value in
influencing where changes go. If they have a particular solution to a problem
that's not well-solved elsewhere, they can influence the world to follow their
approach to solving it (or at least not pull the rug out from under them)
instead of going a totally different way and turning their code into technical
debt.

------
DonHopkins
I've been looking for something framework-agnostic like this to make a fresh
implementation of pie menus.

Here's the documentation and source code of my old jQuery pie menus, which are
getting pretty long in the tooth, and which I need to reimplement as Web
Components in TypeScript.

[https://donhopkins.com/mediawiki/index.php?title=JQuery_Pie_...](https://donhopkins.com/mediawiki/index.php?title=JQuery_Pie_Menus)

[https://github.com/SimHacker/jquery-pie](https://github.com/SimHacker/jquery-
pie)

The challenge is how to design widgets that developers and designers can
easily skin, and totally customize the presentation and feedback by mixing and
layering different technologies (like css, html, canvas, and WebGL, for
example), independent of the tracking behavior.

And how to design a complete set of callbacks and tracking notifiers and hooks
that enable developers to provide rich feedback that's deeply integrated with
their application (like drawing the feedback based on application state, or
previewing the effects of the pie menu gesture in the app, while the menu is
still tracking).

You can do some kinds of simple styling with CSS, and more kinds of deeper
designs with html templates, and all kinds cool customization with JavaScript
code and dynamic HTML.

And you can define and configure trees of menus/slices/items with JSON, XML,
or HTML structures, including graphical and layout properties, and event
handlers.

Or you might want to procedurally draw some or all of the widget with a canvas
(while using html text for the labels, which is much easier to deal with and
more accessible than drawing text in a canvas).

Or you might want to draw the menu items or background or even the labels in
3D with WebGL.

How can one web component handle all these different ways of mixing and
matching rendering and feedback?

For example, these Unity3D pie menus can display text and image feedback in
the 2D overlay, mixed with 3D objects (drawn in an overlay camera, not
actually drawn directly in the world, or objects in the world would occlude
them).

[https://www.youtube.com/watch?v=sMN1LQ7qx9g](https://www.youtube.com/watch?v=sMN1LQ7qx9g)

>Unity3D Pie Menu Demo: I've made a general purpose pie menu component in C#
for Unity3D, which supports text items, image items, and 3d object items too!

Another hard question is how do you define and configure these widgets?
There's a whole spectrum of different people with different use cases, from
downloading dynamic JSON menu trees from a web server, to writing annotated
html trees that degrade gracefully to usable menus with JavaScript disabled,
to building and styling menus in an interface builder at design time, to
procedurally generating them with an api at runtime, to integrating with an
existing tool's editors like Unity3D at authoring time, or even to enabling
game players to build and customize their own menus at playtime.

The Unity3D editor makes it possible to construct trees of menus/slices/items
out of 3d objects in the world, and edit their properties with custom editor
control panels, and configure callback handlers that can modify the menus and
3D objects during tracking to provide feedback. (Like making the 3d menu items
spin and scale and fly around, or mapping your face from the camera onto a
mesh in the center of the menu, and tilting the mesh in the direction of the
selected slice, to simulate the pie menus in The Sims.)

The Coral Menu and Trace Menu from Simon Schneegans’ Bachelor Thesis are
perfect examples of the kind of fluid dynamic layout and feedback that I'd
like to implement with HTML components and the canvas 2d api:

[https://vimeo.com/51072812](https://vimeo.com/51072812)

>The Coral-Menu

>The first prototype is targeted at users who often search for items due to
their manifold menu usage. It displays hierarchies with ease. Even very deep
hierarchies are easy to explore. Many items are displayed by increasing the
pie’s radius and stacking the labels which are displayed next to their sector
on top of each other. The following clip demonstrates the behavior. As you can
see, the items of sub-menus are indicated by little dark blobs at their
parents. This menu is quite fast to use because of the mouse making a smooth
movement.

[https://vimeo.com/51073078](https://vimeo.com/51073078)

>The Trace-Menu

>The second prototype addresses itself to users who often make use of the same
menus. Thus they know where to find an entry and want to select it blazingly
fast. In contrast to the Coral-Menu each sub-menu is a complete 360-degree-
Pie-Menu with one entry being the parent menu. The hierarchy is visualized by
a path between the visited menus. This menu features a so-called “Marking-
Mode”: The user may draw the path (the “trace”) to the desired entry with one
continuous gesture. Watch the following clip and you will understand this
behavior — the Marking-Mode is used for the very last selection.

------
ng7j5d9
Every time I see yet another library of web components I think of the classic
XKCD about standards.

Apparently there were N web component libraries but none of them were just
what ING wanted, so now there are N+1 web component libraries.

~~~
spankalee
At least these are interoperable with plain HTML, vanilla JavaScript,
Markdown, and frameworks. There's value in actual standards.

~~~
Vinnl
Well, you can't just drop them in a React application just yet...

~~~
ergo14
You can do that for preact,vue,svelte,angular and others. That should tell
something.

~~~
Vinnl
Maybe. But in my case, that tells me that "Web Components is compatible with
any framework" isn't necessarily true.

~~~
ergo14
That makes no sense, they are compatible with react, you just need to write
more code to use them. [https://custom-elements-
everywhere.com/](https://custom-elements-everywhere.com/) I find it
interesting that you blame WC not react devs for the fact they don't want to
improve your experience.

~~~
Vinnl
Ah sorry, I meant to say "Web Components can just be dropped into any
framework" isn't true. Note that you can also use React components in Angular
or whatever if you just write more code to use them, but that just doesn't
provide enough value to me to overcome the downside.

Also note that I'm not "blaming" anyone; just explaining why it's not worth it
for me at this point in time to adopt Web Components in my React applications.
I very much like the idea of Web Components no longer making us reliant on the
web standards process to finally add things like date pickers or typeahead
components, but I just don't think it's there yet.

