Friday, July 31, 2015

Polymer WebComponents Client served by Java Actors

Front end development productivity has been stalling for a long time. I'd even say regarding productivity, there was no substantial improvement since the days of Smalltalk (Bubble Event Model, MVC done right, component based).

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
It would not be a real web technology without some serious drawbacks: Html Imports are handled by the browser, so you'll get many http requests when loading a webcomponent app using html imports to resolve dependencies.
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 Demohttp://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".

Application structure

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
  • underlying transport protocol
  • message encoding
As kontraktor maps actors to a concrete transport topology at runtime, a web app server application does not look special:


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.

54 comments:

  1. Hello Rüdiger,

    great 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!

    ReplyDelete
    Replies
    1. - 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 دانلود آهنگ های پرطرفدار جدید

      Delete
    2. Great Article android based projects

      Java 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

      Delete
  2. Hi Joachim,

    "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. ;-) ).


    ReplyDelete
  3. Hi Rüdiger,
    thanks 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/

    ReplyDelete
  4. 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.

    ReplyDelete
  5. Btw 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%.

    ReplyDelete
  6. This post is likeable, and your blog is very interesting, congratulations :-)

    ReplyDelete
  7. thank you for the information, it very interesting and useful

    ReplyDelete
  8. I 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

    ReplyDelete
  9. Devops is not a Tool.Devops Is a Practice, Methodology, Culture or process used in an Organization or Company for fast collaboration, integration and communication between Development and Operational Teams. In order to increase, automate the speed of productivity and delivery with reliability.

    python training in bangalore
    aws training in bangalore
    artificial intelligence training in bangalore
    data science training in bangalore
    machine learning training in bangalore
    hadoop training in bangalore
    devops training in bangalore

    ReplyDelete
  10. Gaining Python certifications will validate your skills and advance your career.
    python certification

    ReplyDelete
  11. 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
  12. I appreciated your work very thanks Cool Kids

    ReplyDelete
  13. Excellent blog I visit this blog it's really awesome. The important thing is that in this blog content written clearly and understandable. The content of information is very informative.
    Oracle Fusion HCM Online Training
    Oracle Fusion SCM Online Training
    Oracle Fusion Financials Online Training
    oracle fusion financials classroom training
    Workday HCM Online Training
    Oracle Fusion HCM Classroom Training

    ReplyDelete
  14. A befuddling web diary I visit this blog, it's incredibly grand. Strangely, in this present blog's substance made motivation behind fact and sensible. The substance of information is instructive
    Oracle Fusion Financials Online Training
    Oracle Fusion HCM Online Training
    Oracle Fusion SCM Online Training

    ReplyDelete
  15. An overwhelming web journal I visit this blog, it's unfathomably amazing. Unusually, in this present blog's substance made inspiration driving truth and reasonable. The substance of data is enlightening
    Oracle Fusion Financials Online Training
    Oracle Fusion HCM Online Training
    Oracle Fusion SCM Online Training

    ReplyDelete
  16. Nice Information
    Yaaron Studios is one of the rapidly growing editing studios in Hyderabad. We are the best Video Editing services in Hyderabad. We provides best graphic works like logo reveals, corporate presentation Etc. And also we gives the best Outdoor/Indoor shoots and Ad Making services.
    Best video editing services in Hyderabad,ameerpet
    Best Graphic Designing services in Hyderabad,ameerpet­
    Best Ad Making services in Hyderabad,ameerpet­

    ReplyDelete
  17. Good Post
    "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

    ReplyDelete
  18. If 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.
    We also provide Advanced Database Management System help. for students across the globe.
    for more information contact us +16692714848

    ReplyDelete
  19. Public relations research writing services are very difficult to complete and many students are always searching for Public Relations Writing Services to help them complete their public relations coursework services and public relations research writing services.

    ReplyDelete
  20. Thanks, this is generally helpful.
    Still, I followed step-by-step your method in this Java online training
    Java online course

    ReplyDelete
  21. Great Content & Thanks For Sharing With oflox. But Do You Know Why GoDaddy Hosting Is Bad

    ReplyDelete
  22. I 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
    bulk of the economics homework help being completed? More to that if the work is not good enough do you offer free corrections.

    ReplyDelete
  23. Matlab Assignment Help helped me to complete my seventh Matlab assignment, which was also the best-performed! It scored 92/100, which I've never scored before on any other assignment/exam in my lifetime. Otherwise, their service was as quick as usual. The delivery was also on time. I'm now requesting to use this same programmer multiple times. He seems the best in Image Processing tasks. Meanwhile, I'll ask for more Matlab Homework Help soon.

    ReplyDelete
  24. I 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.

    ReplyDelete
  25. Besides my C course, I have a job and family, both of which compete to get my time. I couldn't find sufficient time for the challenging C assignments, and these people came in and saved my skin. I must commend them for the genius Programming Assignment Help. Their C Homework Help tutors did the best job and got me shining grades.

    ReplyDelete
  26. 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.

    ReplyDelete
  27. I 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.

    ReplyDelete
  28. Me 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.

    ReplyDelete
  29. Hi, 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.

    ReplyDelete
  30. Hey 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.

    ReplyDelete
  31. I 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.

    ReplyDelete
  32. This comment has been removed by the author.

    ReplyDelete
  33. This comment has been removed by the author.

    ReplyDelete
  34. Hello. Please check the task I have just sent and reply as soon as possible. I want an adjustment assignment done within a period of one week. I have worked with an Accounting Homework Help tutor from your team and therefore I know it’s possible to complete it within that period. Let me know the cost so that I can settle it now as your Accounting Assignment Help experts work on it.

    ReplyDelete
  35. That is a huge number of students. Are they from the same country or different countries? I also want your math assignment help. I want to perform in my assignments and since this is what you have been doing for years, I believe you are the right person for me. Let me know how much you charge for your math homework help services.

    ReplyDelete
  36. Reading 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

    ReplyDelete
  37. I 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

    ReplyDelete
  38. Today I was surfing on the internet & found this article I read it & it is really amazing articles on the internet on this topic thanks for sharing such an amazing article.
    Web Designing Services in Bangalore

    ReplyDelete
  39. What a great content we have here buy painkillers online as we browse we also see this blog too and is pretty good buy norco online we also realize that blog are good for business we also bring buy oxycodone online best blog to visit

    ReplyDelete
  40. This comment has been removed by the author.

    ReplyDelete
  41. This comment has been removed by the author.

    ReplyDelete
  42. Thank you for nice information, Visit Us:
    Here

    ReplyDelete


  43. Hey 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

    ReplyDelete