Is this a good use case for web components ?
36 views
Skip to first unread message
Himanshu Vijay
Jan 5, 2016, 3:19:53 PM1/5/16
to Web Components Organisation
Hi,
And the consumer projects use like this:
Which'd translate to:
We develop multiple web applications for our enterprise customers. All our web applications have following common things:
- A common but customizable appbar at top which has a standard logo, some standard menu items (for managing auth & security), profile page link etc.
- A common but customizable footer with company logo and some other links.
- A common session management functionality (logic in JS). On timeout it'll display a standard message.
Following is what we are thinking:
- Create web components for appbar, footer, session management. lets call them
x-appbar
x-session-manager
x-footer- Create a web component which encompasses the above web components something like this:
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/x-appbar/x-appbar.html">
<link rel="import" href="bower_components/x-session-manager/x-session-manager.html">
<link rel="import" href="bower_components/x-footer/x-footer.html">
<polymer-element name="x-common-body" noscript>
<template>
<body>
<x-appbar/>
<content></content>
<x-footer/>
</body>
</template>
</polymer-element>
And the consumer projects use like this:
<html>
<head>
<meta charset="utf-8">
<link rel="import" href="bower_components/x-common-body/x-common-body.html">
:
</head>
<x-common-body>
<p>Hello world!</p>
<div>
:
</div>
<script...>
</x-common-body>
</html>
Which'd translate to:
<html>
<head>
<meta charset="utf-8">
<link rel="import" href="bower_components/x-common-body/x-common-body.html">
:
</head>
<body>
<x-appbar/>
<p>Hello world!</p>
<div>
:
</div>
<script...>
<x-footer/>
</body>
</html>Advantages we see:
- Different teams develop different web apps using different frameworks. Some may use ExtJs, some Angular etc. By providing this x-common-body we provide them boilerplate code but in a framework agnostic way.
- One central code to add/update the common stuff. Make changes and release. The consumer projects just update their import path (the version).
Questions:
- What problems do you see with this approach ?
- If you have done anything similar please share any useful tip.
- Is x-session-manager a good idea ? It'll have mostly JS.
Taylor Savage
Jan 8, 2016, 3:01:10 PM1/8/16
to webcom...@googlegroups.com
This seems like a perfect use-case for using web components. One quick thing - it looks like your Polymer syntax is from the early 0.5 version - the library has since had a major update to 1.0+ which is significantly lighter and faster.
Taylor
--
You received this message because you are subscribed to the Google Groups "Web Components Organisation" group.
To unsubscribe from this group and stop receiving emails from it, send an email to webcomponent...@googlegroups.com.
To post to this group, send email to webcom...@googlegroups.com.
To view this discussion on the web, visit https://groups.google.com/d/msgid/webcomponents/66ad3841-2b6e-4162-b600-012c6e2cdf4b%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Himanshu Vijay
Jan 8, 2016, 3:09:20 PM1/8/16
to webcom...@googlegroups.com
Thanks Taylor. That's encouraging to know. Will check out the latest version's syntax.
Regards,
Himanshu
--
You received this message because you are subscribed to a topic in the Google Groups "Web Components Organisation" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/webcomponents/UCWTfOqySpQ/unsubscribe.
To unsubscribe from this group and all its topics, send an email to webcomponent...@googlegroups.com.
To post to this group, send email to webcom...@googlegroups.com.
To view this discussion on the web, visit https://groups.google.com/d/msgid/webcomponents/CAN-z2fssvCa5RdR6W_OodpFf9x%2BWg%2BBdQwji4zWfB6CKYNvtKw%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.
-Himanshu Vijay
Reply all
Reply to author
Forward
0 new messages