[HN Gopher] ING open-sources Lion, a library of accessible and f...
___________________________________________________________________
ING open-sources Lion, a library of accessible and flexible Web
Components
Author : d4kmor
Score : 127 points
Date : 2020-02-13 11:44 UTC (11 hours ago)
(HTM) web link (medium.com)
(TXT) w3m dump (medium.com)
| ng7j5d9 wrote:
| 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 wrote:
| At least these are interoperable with plain HTML, vanilla
| JavaScript, Markdown, and frameworks. There's value in actual
| standards.
| ergo14 wrote:
| And they all work together if you want. I see no problem here.
| Ruphin wrote:
| 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 wrote:
| 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/ 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.
| Ruphin wrote:
| Hi ktpsns,
|
| As far as I know it is currently difficult to get API access
| as an individual. The APIs are available to third party
| developers as is required by European regulation, but they
| have to go through a procedure to receive access to
| production data.
|
| We have several teams working on improving our open APIs,
| including availability. If you reach out to me by email I
| will ask one of the teams and let you know when we expect to
| be able to offer what you're looking for. You can find my
| email in my profile.
| inferiorhuman wrote:
| In the United States, TD Ameritrade offers (and has for many
| years) an API (both trading and account stuff) to any account
| holder upon request.
|
| https://developer.tdameritrade.com/
| DonHopkins wrote:
| 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://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
|
| >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
|
| >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
|
| >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.
| spankalee wrote:
| 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.
| aphextron wrote:
| 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 wrote:
| Can you elaborate a bit on what you mean plz? What's the link
| between "interchangeably" and having a build process?
| aphextron wrote:
| >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 wrote:
| 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.
| spankalee wrote:
| The benefit of web components is interoperability. It doesn't
| matter what build tools you might or might not use to make web
| components, you consumer them the same way: 1.
| Load the definition 2. Create an element with any DOM API
| or HTML.
|
| Nothing about web components says you shouldn't use
| dependencies or build steps.
| hncynic23 wrote:
| A financial institution doing something for free? what is this?
| johannes1234321 wrote:
| 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 wrote:
| 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.
| skrebbel wrote:
| 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.
| sandermvanvliet wrote:
| When working at one of the other big banks in the Netherlands I
| had a security officer ask me: "So are we using any open source
| software?" I had the pleasure of seeing his face go white after
| I told him pretty much every bit we had from OS to framework,
| compilers, languages and everything in between was open source
| software...
|
| It wasn't a surprise that we couldn't open source some of our
| stuff "because security"
|
| So yeah, good to see this sentiment is changing
| ci5er wrote:
| ING has always been a pretty open/modern/progressive business
| on a number of fronts. I wouldn't take this as typical. (In
| other words - they aren't Chase and vice-versa, not anything
| against Chase in this claim)
| reaperducer wrote:
| _It 's an impressive sign of the times that a traditional bank
| publishes free & open source software_
|
| Another example: JPMorgan Chase:
| https://github.com/jpmorganchase
| pierre wrote:
| 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.
| d4kmor wrote:
| hey, one of the devs that pushed for it here. Fully correct -
| getting everyone on board and then to actually approve it
| took a long time and a huge amount of effort. Even then
| although the code was open source we had been in a pilot
| phase where we have not been allowed to promote it. But now
| it's share it is much as you can And yes we hope to get a big
| community externally and internally which will improve the
| components overall
| boughtOut wrote:
| ING is actually Capital One.
| actionjezus6 wrote:
| What is this, a noble well-respected banking institution or a
| software house? Preposterous! /s
___________________________________________________________________
(page generated 2020-02-13 23:00 UTC)