Reusable components
Rothenburg ob der Tauber by Nuremberg, Germany. Well preserved medieval german town, UNESCO world culture heritage site, on of the greatest tourist attractions of Europe.

Reusable components

Building UI with less tech burden

Reusable components, when designed properly, can save us lot of trouble as well as money. This is especially true for established business model, which itself tends to be sustainable over decades. Therefore for bank industry, this topic could be worth some study.

Idea

When you design a website, you can start to think of pages and components. The page is still #1 structural pillars in constructing a website, no question about it. If you haven't been practicing chopping functionalities into pages in the past, please use the page to segregate the responsibility of functionalities, so you don't get overwhelmed by implementing lots of things at one spot.

Component carries additional flexibility, if not the only way, to be swapped in and out of the page for multiple web projects. Taking Bootstrap as an example in prototyping a website, it's a superstar reusable tool to help you focus more on your content and less on how you want to theme the site. It allows you to come back to refine those components when the time is right, ex. when you get more budget. Page chops into sections, section into widgets and continuing this pattern leads us better reusability.

Exercise

With the idea, let's demonstrate it with a quick example. Say we're writing our first app.

Step 1 - content, write your business content

  <h1>Hello World</h1>

Of course, our first app won't be as simple as that, but let's say we'd like our site to look like the website we build before, ex. with the same header, footer and look and feel.

Step 2 – header and footer, authorization, menus, etc.

  <div mc-body>
    <h1>Hello World</h1>
  </div>

Ok, by wrapping our content with an HTML tag mc-body, the header shows up in front of the content, and the footer after. Just imagine.

Step 3 – content layout, ex. sidebar

  <div mc-body>
    <div mc-content>
      Hello World
    </div>
  </div>

This can go further, let's say, we have sidebar, form, button, grid, the list can go on and on. What if we can just add another HTML tag mc-content so that all HTML content you write in hello world section can be aware of the Environment. Just like Bootstrap themes the site, Angular defines the site with custom HTML tags. We can live with more tags, can't we?

Result

The above custom tags are not free, you need to define them, plug them into your app, and might carry an additional cost in designing and testing. No free lunch here. However next time you need it, or you know you'll need it for 50+ times, it'll become handy. You can see the cost per app diminishes very quickly as the number increases and can be negligible eventually. This type of scalability can be very rewarding.

The way we approach The (web) problem is a bit different now. The question becomes who should be responsible for a certain section (or component) of the website. Since highly reusable component, once identified, can be built and maintained by a team different to each app team who uses the component. This doesn't prevent it from getting efficient at all, instead, it actually confines the domain knowledge and isolates it. With a clear definition of in and out parameters of this domain, the component will become highly reusable in design and therefore successful for business.

Angular-mc-common is common stylesheets and Angular components built for Deutsche Bank. The idea is to create common elements, such as header, footer, menus so that they can be plugged into apps without lines of change. It not only works with Angular applications but also adapts easily to JSP, GWT or any embedded web framework. It has been built into 35+ apps integrated with swappable authorization service in production.


要查看或添加评论,请登录

金方的更多文章

  • Consequences of the Bailout

    Consequences of the Bailout

    There's nothing wrong to protect your people, your society or your finance. We should be thankful if someone is…

  • Angular, React and Commons

    Angular, React and Commons

    Web frameworks are marketing words to me these days. Everyone knows something about them.

  • Protection from big loss, sell yourself an insurance plan

    Protection from big loss, sell yourself an insurance plan

    An insurance plan prevents you from getting burned to the ground when an unanticipated thing happens. Before I get into…

  • "Perfect" Google map algorithm under emergency conditions

    "Perfect" Google map algorithm under emergency conditions

    I took a vacation to Cuba lately, and on the way there we'd been told the Irma is coming our way so we should head back…

  • New or Old, just can't have it all

    New or Old, just can't have it all

    I think it's our culture and life learning experience that taught us that we just can't have it all most of time. At…

  • Construct new and Build a system

    Construct new and Build a system

    I sometimes vomit if I get puzzled by certain process, especially after I realized there's nothing I can do to change…

  • "Zero framework"

    "Zero framework"

    I was born and raised in China, and watched a lot of movie as I grow up. There's always an old guy who can beat the…

  • Drupal Falling

    Drupal Falling

    It's really hard to believe a giant might fall someday. But actually the giant thing normally falls in a lot faster…

  • Deployment chaos - Container to the rescue

    Deployment chaos - Container to the rescue

    In this article, the author describes the inconsistency between development and deployment, and explains that a good…

  • Being dependent - Crying baby in architect

    Being dependent - Crying baby in architect

    A friend of mine want to learn programming, I found it very hard to give him a direction. It's not that I'm not…

    3 条评论

社区洞察

其他会员也浏览了