Serving a webpage with Redstone

Issue

I am developing a web application with Dart using redstone and polymer
Because Dart allows for server and client side development, I wonder what a good pattern for a web application is (specifically to Dart)

Option 1:

1. Have a server, say, /bin/server.dart

   1.1. get a request there and respond with json

    @app.Route("/user/:id", methods: const [app.GET])
    getUser(int id) { ... }

2. have a client, i.e. web/user.html and web/user.dart

   2.1 in user.dart make a request to server

   2.2 receive json and form a proper user.html

Option 2:

1. Have a server /bin/server

   1.1 get a request there and respond with an html page, similar to

    @app.Route("/")
    helloWorld() => "Hello, World!";

If in the first case I more or less know (and understand) how to make things work, while i find it really frustrating that I do not take advantage of Dart’s server-client code-sharing: I need to encode to and decode back json to get the same data. Is there a way to avoid it?

The second option is much less clear for me: how would I serve a web page in this way? How would I make Polymer do its work?

Answers on the questions in the text and a general explanation of a darty way to develop web apps are very much appreciated.

Solution

You can see a Redstone + Polymer application example here: https://github.com/luizmineo/io_2014_contacts_demo

Basically, it works as Option 1: The client and server communicates through a service API, and the data is encoded as JSON. Although, Redstone uses the shelf_static package to serve the client code to the browser as well.

If you prefer, it’s also possible to use a server side template engine, such as mustache, to build html pages in the server, although, I think it would be really difficult to integrate that with Polymer.

And finally, you always have to encode the data someway when transferring data between client and server, but this doesn’t means they can’t share code. They can use the same domain classes, for example. Check out the sample application linked above for more details.

Answered By – luizmineo

Answer Checked By – Jay B. (FlutterFixes Admin)