LayoutSR

Suppose you are creating blogging application and on the page where you display the blog post you have following:

  1. Top menu
  2. Blog Content
  3. Comment Section
  4. Author details
  5. Footer

The Usecase

You want to prioritize streaming of components and stream should happen in following order

  1. Blog Content
  2. Author Details
  3. Top menu
  4. Comment Section
  5. Footer

The above order will ensure that user will see the most relevant content(to him) first.

What LayoutSR brings to the table?

LayoutSR enables you to stream the components and renders each at a placeholder location in your layout.

How to use

The constructor of LayoutSR class accepts Arbitary Argument List (args) and Keyword Arguments (kwargs)

All args are components and each should be an instance of class Component. The order of args defines the order in which components will be rendered.

For example:

return LayoutSR(
        Component('right-section', render_right),
        Component('left-section', render_left),
        layout=Layout(render_layout),
        pre_stream=(Dom(render_first), Dom(render_menu)),
        post_stream=Dom(render_last)
    ).response

In above snippet args are Component(render_right) and Component(render_left). The order in which components are rendered is same as the order of args.

There are several kwargs that are supported, they are:

  1. layout
  2. pre_stream
  3. post_stream
  4. stream_div_id
  5. stream_div_layout_id

NOTE: Detailed documentation of usage of above kwargs can be found below.

Apart from above mentioned kwargs, all the ones that are allowed with Response object of your Flask are also allowed in LayoutSR's constructor. For more details please refer to API Documentation of Flask specific to your version.

For example: For version Flask v0.11 Response object documentation following kwargs are also supported

  • status
  • headers
  • mimetype
  • content_type
  • direct_passthrough

LayoutSR object contains a property response which is to be returned by your main flask endpoint. For more clarification check the sample below

Sample Example

from flask import Flask
from flasksr import LayoutSR, Component, Layout, Dom

app = Flask(__name__)


def render_menu():
    return """
        <ul style="list-style-type: none; margin: 0; padding: 0;">
            <li><a href="/">Home</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">About</a></li>
        </ul>
    """


def render_body():
    return """
        <div style="margin-top: 50px;">Hello World!</div>
    """

def render_first():
    return """
        <html>
            <head>
                <title>FlaskSR Example</title>
            </head>
            <body>
    """

def render_last():
    return """
            </body>
        </html>
    """


def render_layout():
    '''This function returns the render string of the layout of the page.
    '''

    return """
        <div style="width: 100%;">
            <div ref-sr-id="left-side" style="float:left; width: 45%"></div>
            <div ref-sr-id="right-side" style="float:right; width: 45%"></div>
        </div>
    """

def render_left():
    '''This function returns the render string of the left half of the page
    '''

    return """
        <div style="background: green;">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut placerat metus lectus, sed dignissim turpis egestas vel. Proin quis nibh nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean magna mauris, pellentesque at tincidunt at, varius at velit. Nam ultricies dui eget nisl aliquam mattis. Morbi commodo, orci ac interdum sagittis, urna massa vulputate lorem, non mollis mauris est ultricies lectus. Phasellus non lacus a felis fringilla scelerisque. Mauris et enim consectetur, scelerisque enim non, mattis est. Aenean eget diam a diam aliquam congue ac vel mi. Curabitur sollicitudin ultrices tellus in blandit. Quisque non auctor est, quis faucibus erat. Donec porta elit libero, eu pellentesque mi malesuada a. Suspendisse ut faucibus ligula, non sodales nulla. Nunc vehicula blandit ullamcorper. Fusce mattis ultrices urna in elementum.
            Pellentesque at euismod libero. Cras pretium vulputate mi, feugiat ullamcorper nunc accumsan ac. Proin quam ante, laoreet quis sapien id, bibendum pretium nisl. Nulla pulvinar lobortis scelerisque. Curabitur venenatis, orci eget congue tristique, magna ipsum auctor mi, eget tincidunt augue mi in nisi. Mauris nibh felis, lobortis at varius ac, faucibus quis sapien. Suspendisse eu porta metus, non lacinia erat. Sed id eros at massa commodo placerat quis eget lacus. Nullam sed odio quis libero vehicula consequat. Maecenas id neque nec lectus porttitor cursus. Suspendisse ultricies nisl ligula, non tempus est dignissim in. Nam id suscipit enim. Mauris arcu tortor, efficitur eu nisi at, pretium placerat neque. Sed mattis dapibus sagittis. Mauris a ligula vitae neque ullamcorper sodales.
        </div>
    """

def render_right():
    '''This function returns the render string of the right half of the page
    '''

    return """
        <div style="background: blue;">
            Quisque consequat nunc vitae ex hendrerit, in tempor felis eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus euismod erat accumsan tellus consequat imperdiet. Nulla facilisi. Proin tristique orci et risus convallis, vel pretium lorem bibendum. Proin nec rutrum urna. Aenean luctus convallis rhoncus. Quisque bibendum augue eu luctus luctus. Suspendisse posuere libero leo, sed vehicula felis posuere non. Fusce hendrerit, lorem eu hendrerit tempus, neque mauris dignissim dui, et ultricies turpis velit vel lorem. Sed scelerisque sit amet libero ac auctor. Donec mollis faucibus rutrum. Aliquam erat volutpat. Quisque imperdiet tellus in pulvinar gravida.
            Fusce eu erat sem. Curabitur rutrum libero nec orci iaculis placerat. Ut sed egestas arcu. Aliquam facilisis ullamcorper risus nec vestibulum. Duis gravida leo quis tempor dignissim. Nulla consectetur cursus libero, a dapibus nunc iaculis nec. Phasellus vel lacus vitae velit consequat mollis. Integer pulvinar odio vel libero posuere, sit amet ornare ante ornare.
        </div>
    """


@app.route('/')
def hello():
    return LayoutSR(
        Component("right-side", render_right),
        Component("left-side", render_left),
        layout=Layout(render_layout),
        pre_stream=(Dom(render_first),
                    Dom(render_menu),),
        post_stream=Dom(render_last)
    ).response


if __name__ == '__main__':
    app.run(host='0.0.0.0')

Before you use LayoutSR

It will be helpful if you go through the documentations of the following before you dive deep into LayoutSR.

  1. Component
  2. Layout
  3. Dom

Customizing options

There are several custom kwargs that you need to know before you get started.

  • layout: Value to this kwarg should be an instance of class Layout.

  • pre_stream: Value to this kwarg should be an instance of class Dom or a list/tuple that contains instances of class Dom.

    Note that the sequence in which the functions are specified in the list/tuple will decide the priority of it being streamed. The first function passed will be the first one to be streamed across.

  • post_stream: Value to this kwarg should be an instance of class Dom or a list/tuple that contains instances of class Dom.

    Note that the sequence in which the functions are specified in the list/tuple will decide the priority of it being streamed. The first function passed will be the first one to be streamed across.

  • stream_div_layout_id: The layout of your components is enclosed within a sr-layout. LayoutSR by default treats sr-layout with id set as stream-div-layout to be your layout. In case you want to override this default behaviour you can set this kwarg to desired string which will be the id to your layout specified in the layout's render string.

  • stream_div_id: The components that are to be streamed are passed as args to constructor of LayoutSR. These components are initially streamed inside a self constructed div whose id is set to stream-div. In case you want to override this id then you can do this by using this kwarg

Following block diagram shows the sequence in which different entities of LayoutSR are streamed.

-----------------
|   pre_stream   |  <- Step 1: Stream everything specified
-----------------               under pre_stream
        |
-----------------
|     layout     |  <- Step 2: The render function under
-----------------               layout is streamed
        |
-----------------
|   Components   |  <- Step 3: All components passed as
-----------------              args are streamed
        |
-----------------
|  post_stream   |  <- Step 4: Stream everything specified
-----------------              under post_stream

How is LayoutSR different than BasicSR?

BasicSR streams content from top to bottom, but LayoutSR will not only stream your content on priority but also will ensure that it adheres to the layout provided.

results matching ""

    No results matching ""