Weird enough, for a long time things got worse: Document centric web technology made classic and proven component centric design patterns hard to implement.
For reasons unknown to me (fill in some major raging), it took some 15 years until a decent and well thought webcomponent standard (proposal) arised: WebComponents. Its kind an umbrella of several standards, most importantly:
- Html Templates - the ability to have markup snippets which are not "seen" and processed by the browser but can be "instantiated" programmatically later on.
- Html Imports - finally the ability to include a bundle of css, html and javascript implicitely resolving dependencies by not loading an import twice. Style does not leak out to the main document.
- Shadow Dom
As the Html standard is strictly separated from the Http protocol, simple solutions such as server side imports (to reduce number of http requests) can never be part of an official standard.
Anyway, with Http-2's pipelining and multiplexing features html-imports won't be an issue within some 3 to 5 years (..), until then some workarounds and shim's are required.
Github repo for this blog "Buzzword Cloud": kontraktor-polymer-example
Live Demo: http://46.4.83.116/polymer/ (just sign in with anything except user 'admin'). Requires Websocket connectivity, modern browser (uses webcomps-lite.js, so no IE). Curious wether it survives ;-).
Currently Chrome and Opera implement WebComponents, however there is a well working polyfill for mozilla + safari and a last resort polyfill for ie.
Using a server side html import shim (as provided by kontraktor's http4k), web component based apps run on android 4.x and IOS safari.
(Polymer) WebComponents in short
a web component with dependencies (link rel='import'), embedded style, a template and code
Dependency Management with Imports ( "<link rel='import' ..>" )
The browser does not load an imported document twice and evaluates html imports linearly. This way dependencies are resolved in correct order implicitly. An imported html snippet may contain (nearby) arbitrary html such as scripts, css, .. most often it will contain the definition of a web component.
Encapsulation
Styles and templates defined inside an imported html component do not "leak" to the containing document.
Web components support data binding (one/two way). Typically a Web component coordinates its direct children only (encapsulation). Template elements can be easily accessed with "this.$.elemId".
An application also consists of components. Starting from the main-app component, one subdivides an app hierarchically into smaller subcompontents, which has a nice self-structuring effect, as one creates reusable visual components along the way.
The main index.html typically refers to the main app component only (kr-login is an overlay component handling authentication with kontraktor webapp server):
That's nice and pretty straight forward .. but lets have a look what my simple sample application's footprint looks like:
Web Reality:
hm .. you might imagine how such an app will load on a mobile device, as the number of concurrent connections typically is limited to 2..6 and a request latency of 200 to 500ms isn't uncommon. As bandwidth increases continously, but latency roughly stays the same reducing the number of requests pays off even at cost of increased initial bandwidth for many apps.
In order to reduce the number of requests and bandwidth usage, the JavaScript community maintains a load of tools minifying, aggregating and preprocessing resources. When using Java at the server side, one ends up having two build systems, gradle or maven for your java stuff, node.js based javascript tools like bower, grunt, vulcanize etc. . In addition a lot of temporary (redundant) artifacts are created this way.
As Java web server landscape mostly sticks to server-centric "Look-'ma-we-can-do-ze-web™" applications, its hardly possible to make use of modern javascript frameworks using Java at server side, especially as REAL JAVA DEVELOPERS DO NOT SIMPLY INSTALL NODE.JS (though they have a windows installer now ;) ..). Nashorn unfortunately isn't yet there, currently it fails to replace node.js due to missing API or detail incompatibilities.

I think its time for an unobtrusive pointer to my kontraktor actor library, which abstracts away most of the messy stuff allowing for direct communication of JavaScript and Java Actors via http or websockets.
Even when serving single page applications, there is stuff only a web server can implement effectively:
- dynamically inline Html-Import's
- dynamically minify scripts (even inline javascript)
In essence inlining, minification and compression are temporary wire-level optimizations, no need to add this to the build and have your project cluttered up. Kontraktor's Http4k optimizes served content dynamically if run in production mode.
The same application with (kontraktor-)Http4k in production mode:
even better: As imports are removed during server side inlining, the web app runs under Safari IOS and Android 4.4.2 default browser.
Actor based Server side
Wether its a TCP Server Socket accepting client(-socket)s or a client browser connecting a web server: its structurally the same pattern:
1. server listens for authentication/connection requests.
2. server authenticates/handles a newly connecting client and instantiates/opens a client connection (webapp terminology: session).
What's different when comparing a TCP server and a WebApp Http server is
The decision on transport and encoding is done by publishing the server actor. The underlying framework (kontraktor) then will map the high level behaviour description to a concrete transport and encoding. E.g. for websockets + http longpoll transports it would look like:
On client side, js4k.js implements the api required to talk to java actors (using a reduced tell/ask - style API).
So with a different transport mapping, a webapp backend might be used as an in-process or tcp-connectable service.
So far so good, however a webapp needs html-import inlining, minification and file serving ...
At this point there is an end to the abstraction game, so kontraktor simply leverages the flexibility of RedHat's Undertow by providing a "resource path" FileResource handler.
The resource path file handler parses .html files and inlines+minifies (depending on settings) html-import's, css links and script tags. Ofc for development this should be turned off.
The resource path works like Java's classpath, which means a referenced file is looked up starting with the first path entry advancing along the resource path until a match is found. This can be nice in order to quickly switch versions of components used and keep your libs organized (no copying required).
As html is fully parsed by Http4k (JSoup parser ftw), its recommended to keep your stuff syntactically correct. In addition keep in mind that actors require non-blocking + async implementation of server side logic, have your blocking database calls "outsourced" to kontraktors thread pool like
Conclusion:
Wether its a TCP Server Socket accepting client(-socket)s or a client browser connecting a web server: its structurally the same pattern:
1. server listens for authentication/connection requests.
2. server authenticates/handles a newly connecting client and instantiates/opens a client connection (webapp terminology: session).
What's different when comparing a TCP server and a WebApp Http server is
- underlying transport protocol
- message encoding
a generic server using actors
The decision on transport and encoding is done by publishing the server actor. The underlying framework (kontraktor) then will map the high level behaviour description to a concrete transport and encoding. E.g. for websockets + http longpoll transports it would look like:
On client side, js4k.js implements the api required to talk to java actors (using a reduced tell/ask - style API).
So with a different transport mapping, a webapp backend might be used as an in-process or tcp-connectable service.
So far so good, however a webapp needs html-import inlining, minification and file serving ...
At this point there is an end to the abstraction game, so kontraktor simply leverages the flexibility of RedHat's Undertow by providing a "resource path" FileResource handler.
The resource path file handler parses .html files and inlines+minifies (depending on settings) html-import's, css links and script tags. Ofc for development this should be turned off.
The resource path works like Java's classpath, which means a referenced file is looked up starting with the first path entry advancing along the resource path until a match is found. This can be nice in order to quickly switch versions of components used and keep your libs organized (no copying required).
As html is fully parsed by Http4k (JSoup parser ftw), its recommended to keep your stuff syntactically correct. In addition keep in mind that actors require non-blocking + async implementation of server side logic, have your blocking database calls "outsourced" to kontraktors thread pool like
Conclusion:
- javascript frameworks + web standards keep improving. A rich landscape of libraries and ready to use components has grown.
- they increasingly come with node.js based tooling
- JVM based non-blocking servers scale better and have a much bigger pool of server side software components
- kontraktor http4k + js4k.js helps closing the gap and simplifies development by optimizing webapp file structure and size dynamically and abstracting (not annotating!) away irrelevant details and enterprisey ceremony.
Hello Rüdiger,
ReplyDeletegreat post and tons of resources to dive into. My feelings after reading (may be wrong):
- Not sure about productivity stalling, but with similar time you build more complex stuff now
- YES, WebComponents are great
- YES, Http/2 has huge potential
- Document centric is not bad per se: if problem/domain can be naturally modelled in document style (REST in original Fielding sense) then you can leverage external help to reduce latency (proxies, browser cache, CDNs). Seeing Http just as a lame verbose transport, inferior to binary sockets may be true in a lot of use cases, but not all.
- frontend build tools are increasingly complex and allow more productivity (coffee- & typescript, SASS/Less etc) but add layers, steps and indirections. Its nice to reference font-files and SVGs in CSS, but loading these deeper graphs leads to more waterfall style loading.
- clever bundling on server-side partly exists, but in the age of Hotspot-VMs Im waiting for the adaptive server-side framework, that optimizes, advertises/pushes the dependent resources much smarter (profiling on statistics, request/user, network (3G/4G/cable); probing browser cache etc).
- What really counts is "start render" and "page loaded". Even your bundled example looks like a small waterfall. The fontfile (CWB..woff2))seems to be discovered in CSS. If so, probably letting the browser discover the fontfile already before CSS loads, has more end user impact then reducing the backend server's response time by 30%. You can do crazy stuff with prefetching (https://plus.google.com/+IlyaGrigorik/posts/ahSpGgohSDo) and
soon http/2 push and priorities.
Cheers!
- What really counts is "start render" and "page loaded". Even your bundled example looks like a small waterfall. The fontfile (CWB..woff2))seems to be discovered in CSS. If so, probably letting the browser discover the fontfile already before CSS loads, has more end user impact then reducing the backend server's response time by 30%. You can do crazy stuff with prefetching (https://plus.google.com/+IlyaGrigorik/posts/ahSpGgohSDo) and دانلود آهنگ های پرطرفدار جدید
DeleteGreat Article android based projects
DeleteJava Training in Chennai Project Center in Chennai Java Training in Chennai projects for cse The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training Project Centers in Chennai
Hi Joachim,
ReplyDelete"Not sure about productivity stalling, but with similar time you build more complex stuff now"
Hm .. technically more complex, but from my POV the basic mechanics of mapping data to a visual representation, assist + map + validate user input to form a transaction/change action, then update visualization have not changed significantly and still requires a lot of "hand written" and verbose code. The level of abstraction has not changed for decades (not that I know every GUI framework since the 80's ..)
"document centric, CDN"
A big productivity driver in team driven UI development is the ability to encapsulate behaviour + look and processing into a visual component which can be easily reused. I found it hard to achieve something similar with document-centric approaches (especially for enterprise-grade UI, where (frequently) complex input assist + validation is required). It often ended having to add different snippets at different places in order to make a visual component work, in addition there is a lack of composability (nest reusable components into each other) with document centric approaches). Many JS frameworks and server frameworks addressed that, however these where isolated solutions working in scope of a single framework only.
CDN- mostly everytime i find a website hanging its a slowish cdn request. Ofc improved caching later on might pay off for that ..
"front end build tools"
Agree, my gut tells me some of this stuff is kind of over the top and creates its own hell of complexity on top of the existing soup.
"clever bundling"
Yeah that's definitely a direction to go for. My example is quite simple, actually one could register several "resource path" providers thereby splitting into several "chunks" of bundled resources. Its also possible with "no-inline" to disable inlining on a by-tag base.
I admit I am not a webapp super-expert, I am looking for a good tradeoff of "automated optimization" and productivity + simplicity. From what I have tested, "waterfalling" works well up to middle-sized apps. It pays off more on mobile devices as network latency is higher there. Time to render ofc cannot be that well with html imports (except http 2 can be used), however I'd be perfectly fine with a gmail alike splash while SPA loads, I'd rather wait once as with each click.
Regarding http 2 I am kind of reluctant to rely on it, as it will take some time until this is broadly available.
The example app imports half of google paper+iron theme + d3 + wordcloud (like ~45 imports) so its actually not that small. I haven't spent time on font resolution, but thanks for the hint, maybe one could automatically inject prefetch statements on server side. Anyway I think adaptive + intelligent runtime webapp optimization is the way to go and I likely will explore further optimizations in this area as I'll spend some time with webapps for the next month (thanks for the link btw. ;-) ).
Hi Rüdiger,
ReplyDeletethanks for replying. One remark, two more links:
1) with CDN i didnt mean public CDNs for jquery, D3 etc. but offloading own stuff to cloudfront, cloudflare. Its usually closer/faster to end-users. Also helps sometimes for SEO, since it looks like e.g. content from spanish IPs ranks better in spanish Google then content from UK or DE datacenters
2) If you pay adwords, then pagespeed score ( https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2F46.4.83.116%2Fpolymer%2F&tab=desktop) is relevant for the money you burn per click
3) A bit more detail then PageSpeed-plugin etc. http://www.webpagetest.org/result/150805_58_VTC/
Hi Joachim, very much aprecciate your comptent comments and additions. Coming from an enterprise application background, I kind of lack knowledge regarding retail web apps.
ReplyDeleteBtw pagespeed gave me 99 of 100 both on mobile and desktop because of missing html/css minification. As content is delivered gzipped anyway, this would enhance only 2%.
ReplyDeletei know, good work :)
DeleteThis post is likeable, and your blog is very interesting, congratulations :-)
ReplyDeletethank you for the information, it very interesting and useful
ReplyDeleteI have read all the comments and suggestions posted by the visitors for this article are very fine,We will wait for your next article so only.Thanks! SEO client management
ReplyDeletecorporate training companies
ReplyDeletecorporate training companies in mumbai
corporate training companies in pune
corporate training companies in delhi
corporate training companies in chennai
corporate training companies in hyderabad
corporate training companies in bangalore
Gaining Python certifications will validate your skills and advance your career.
ReplyDeletepython certification
I’ve read some good stuff here. Definitely worth bookmarking for revisiting. I surprise how much effort you put to create such a great informative website.
ReplyDelete算法代写
I appreciated your work very thanks Cool Kids
ReplyDeleteGood Post
ReplyDelete"Pressure Vessel Design Course is one of the courses offered by Sanjary Academy in Hyderabad. We have offer professional
Engineering Course like Piping Design Course,QA / QC Course,document Controller course,pressure Vessel Design Course,
Welding Inspector Course, Quality Management Course, #Safety officer course."
Piping Design Course in India
Piping Design Course in Hyderabad
QA / QC Course
QA / QC Course in india
QA / QC Course in Hyderabad
Document Controller course
Pressure Vessel Design Course
Welding Inspector Course
Quality Management Course
Quality Management Course in india
Safety officer course
We are really grateful for your blog post. You will find a lot of approaches after visiting your post. Great work. seo services in kolkata | seo company in kolkata | seo service provider in kolkata | seo companies in kolkata | seo expert in kolkata | seo service in kolkata | seo company in india | best seo services in kolkata | digital marketing company in kolkata | website design company in kolkata
ReplyDeleteIf you are stuck with your online management assignment then in this case you can opt for our Database Management Assignment help. we provide the best assignment assignment help online.
ReplyDeleteWe also provide Advanced Database Management System help. for students across the globe.
for more information contact us +16692714848
burlap ring bearer pillow
ReplyDeletewaterproof outdoor pillow case
baby decorative pillow
Thanks, this is generally helpful.
ReplyDeleteStill, I followed step-by-step your method in this Java online training
Java online course
Great Content & Thanks For Sharing With oflox. But Do You Know Why GoDaddy Hosting Is Bad
ReplyDeleteI have just come across your post and I believe this is exactly what I am looking for. I want an economics assignment help from a tutor who can guarantee me a top grade. Do you charge per page or does it depend on the
ReplyDeletebulk of the economics homework help being completed? More to that if the work is not good enough do you offer free corrections.
The ardent Programming Homework Help tutor that nailed down my project was very passionate. He answered my Python questions with long, self-explanatory solutions that make it easy for any average student to revise. Moreover, he didn't hesitate to answer other questions, too, even though they weren't part of the exam. If all Python Homework Help experts can be like this then they can trend as the best Programming school ever online.
ReplyDeleteI am looking for a Statistics Assignment Help expert for Statistics Homework Help. I have struggled enough with statistics and therefore I just can't do it anymore on my own. . I have come across your post and I think you are the right person to provide me with SPSS homework help. Let me know how much you charge per assignment so that I can hire you today.
ReplyDeleteMe and my classmates took too long to understand Matlab Assignment Help pricing criteria. we're always grateful for unique solutions on their Matlab assignments. Matlab Homework Help experts have the right experience and qualifications to work on any programming student's homework. They help us in our project.
ReplyDeleteHi, other than economics assignment help are there other subjects that you cover? I am having several assignments one needs an economics homework help expert and the other one needs a financial expert. If you can guarantee quality work on both then I can hire you to complete them. All I am sure of is that I can hire you for the economics one but the finance one I am not sure.
ReplyDeleteHey there, I need an Statistics Homework Help expert to help me understand the topic of piecewise regression. In our lectures, the concept seemed very hard, and I could not understand it completely. I need someone who can explain to me in a simpler way that I can understand the topic. he/she should explain to me which is the best model, the best data before the model and how to fit the model using SPSS. If you can deliver quality work then you would be my official Statistics Assignment Help partner.
ReplyDeleteI don’t have time to look for another expert and therefore I am going to hire you with the hope that I will get qualityeconomics assignment help. .Being aneconomics homework help professor I expect that your solutions are first class. All I want to tell you is that if the solutions are not up to the mark I am going to cancel the project.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteReading your blogs is therauptic. Keep sharing. I love them Are you also searching for Assignment Help UAE? we are the best solution for you. We are best known for delivering cheap assignments to students without having to break the bank
ReplyDeleteI love it here. Keep sharing your good vibes. I love them Are you also searching for Online mathematics help? we are the best solution for you. We are best known for delivering cheap assignments to students without having to break the bank
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThank you for nice information, Visit Us:
ReplyDeleteHere
Very nice blog and articles.
ReplyDeleteInternship providing companies in chennai | Where to do internship | internship opportunities in Chennai | internship offer letter | What internship should i do | How internship works | how many internships should i do ? | internship and inplant training difference | internship guidelines for students | why internship is necessary
ReplyDeleteHey friend, it is very well written article, thank you for the valuable and useful information you provide in this post. Keep up the good work! FYI, please check these depression, stress and anxiety related articles.
How to Build a Portfolio with ETFs, My vision for India in 2047 postcard, Essay on Unsung Heroes of Freedom Struggle
Nice blog,I understood the topic very clearly,And want to study more like this.
ReplyDeleteinternship for web development | internship in electrical engineering | mini project topics for it 3rd year | online internship with certificate | final year project for cse
바카라 사이트 ⚡️ 【 우리카지노가입쿠폰 】 - 슈터카지노
ReplyDeleteカジノミー / Casino.me の無料ボーナス、入金・出金方法 - カジノ日本
ReplyDeleteThe assignment seasons are on and troublesome weeks lie ahead. greatassignmenthelper.com is here for your help. The Assignment Helpers and Assignment Help are ready to aid those who need it. I had a fantastic experience working with them, hope you like their work as well. Giving them my assignment was like getting assured of an A+ after my submission.
ReplyDeleteFirstly, In this article will explain Schoology fbisd. From other people who are having the same problem with Schoology? Schoology is unable to load in your browser or you have difficulties accessing Schoology Fbisd Moms and dad Login site and all of its services, or you wish to get in communication with the consumer care to get help support service, and read reviews from other people who are having the same problem with Schoology.
ReplyDeleteIn most life films are many intriguing elements on Earth. And different Languages in India and Every Language includes its market and making of their Industries. After Bollywood premier marketing marketplace is most beneficial at Tollywood Market. Telugu films are incredibly well known from the India and abroad too. See latest movies in 4movierulz.
ReplyDelete천안출장샵
ReplyDelete강원도출장샵
공주출장샵
서천출장샵
강원도출장샵
논산출장샵
춘천출장샵
심심출장안마
ReplyDelete남양주출장안마
의정부출장안마
제천출장안마
횡성출장안마
충주출장안마
부천출장안마