My Single Page Application with mORMot-mustache

warleyalex · 2014-05-22 14:08:59

I'm playing with mORMot-mustache implementation and I’ve build a single page app which will have multiple views using service method.
When a dynamic page is executing on the server, browser is doing nothing but waiting for the html to come from the server. mORMot server-side takes only 15ms to perform rendering Single page. By the time server finishes doing its work, server will just send the dynamic content and browser will be able to render it right away. OK. Here's an example of a page, where the JS/CSS are loaded only after the page is delivered to the browser:

http://127.0.0.1:8080/services/produtos 8.8KB 15ms
http://localhost:8080/root/stylesheets/default.css 6.1KB 196ms
http://localhost:8080/root/css/style.css 21.6KB 269ms
http://localhost:8080/root/scripts/sammy.js 65.4KB 418ms
http://localhost:8080/root/js/jquery.min.js 90.7KB 449ms
http://localhost:8080/root/images/products/thumbnails/001.jpg 8.9KB 266ms
http://localhost:8080/root/images/products/thumbnails/002.jpg 9.0KB 268ms

Currently, my dynamic page take very little time to finish its job on the server while the JS/CSS/Imgs are loaded by the browser take much more time to load.
a) Is it possible improve performance specially on rendering the <head> session

By changing URL to a hash based path ("#/") makes it possible to avoid page refresh, e.g.
http://localhost:8080/service/products#/
- It’s a shopping cart.

http://localhost:8080/service/products#/checkout
- Order details view which you can customize, add quantities for example.

http://localhost:8080/service/products#/order
- It's an order details view

b) I want to submit data using Ajax POST request and render a template without refresh the page. I’m using a external shared template. I’ve been wondering, if this page generated concurrently would become an issue. Are there possibility this become a messed up, a user see another rendered template, for example?

ab · 2014-05-23 19:39:06

Did you try to use the latest introduced TSQLRestServerURIContext.ReturnFile() method, for direct fast transmission to a HTTP client, handling "304 Not Modified" response (based on the file timestamp), and guessing the corresponding mime type from the file name extension?
See http://synopse.info/fossil/info/34750d8435

It may help for performance.
See also sample "26 - RESTful ORM" for how to mix ORM and REST routing for method-based services.
http://synopse.info/fossil/info/f0da9ade80

TSynMustache is thread-safe, per dedicated template.

warleyalex · 2014-05-23 22:03:35

OK. I gonna take a look later on.

I've detected that my SPA is returning 404 (not found) status code instead of a 200 code. Believe it or not.

I've created a shopping cart with mORMot and ~*~
http://youtu.be/vamHlGQoqWc and

I hadn’t noticed the issue until I inspect google network traffic. The funny part is that all the other resources (images, css, js files) were returning a “200 OK” status code.
My service based method use the same template file, and therefore are created the exact same way,
I couldn’t figure out what created the problem. Even POST request are getting this 404. While the headers of the
pages indicated a 404, the pages were displaying in the Web browsers without any problems.

Last edited by warleyalex (2014-05-23 22:04:13)

ab · 2014-05-23 22:26:22

Nice!

You have to set the http result code to 200.
E.g. by calling Ctxt.Success.
Default is to return an error code.

edwinsn · 2014-05-24 03:00:44

@warleyalex, had a look of your video, nice! One or two weeks ago I started using mORMot, the more I get to know about it, the more I like it, it really can be stated as 'powerful yet simple'. Well done, Arnaud!

mORMot Open Source

#1 2014-05-22 14:08:59

My Single Page Application with mORMot-mustache

#2 2014-05-23 19:39:06

Re: My Single Page Application with mORMot-mustache

#3 2014-05-23 22:03:35

Re: My Single Page Application with mORMot-mustache

#4 2014-05-23 22:26:22

Re: My Single Page Application with mORMot-mustache

#5 2014-05-24 03:00:44

Re: My Single Page Application with mORMot-mustache

Board footer