Client Side Rendering Tutorial

By now you should have your extension set up for client-side rendering. If you don’t, go back to the first step (Hello World) and then come back here.

There are two parts to a client-side rendered extension, the client and the server. Your client app—probably using something like React or Angular—will be responsible for rendering the UI, but it will use data it fetches from the server to do so. Likewise, when the user performs an action that requires the server, like saving some data, your client will need to send that data to the server and perhaps get some data back in return.

We will show you some ways to get going with the SDK, Tecton, and some of the more common JavaScript libraries. We will also show you how you can communicate with your extension’s server.

Examples and further reading

If you just want to see an example extension or want something more to reference during this tutorial please visit our examples repo.

We also have full Tecton documentation, which you will probably want to review after this tutorial.

Communicating with the server

The first thing you will probably need is some initial data to load. For this purpose, instead of returning an HTML page from our request handler (extension.py), we return a dictionary. This dictionary will end up as JSON in your frontend. If you selected the client-side rendering option when generating your extension it should already be doing this and should look something like this:

"""
AccountDashboard Extension
"""
from datetime import datetime

from q2_sdk.core.exceptions import TectonError
from q2_sdk.core.http_handlers.tecton_client_handler import Q2TectonClientRequestHandler


class AccountDashboardHandler(Q2TectonClientRequestHandler):

    CONFIG_FILE_NAME = 'AccountDashboard'  # configuration/AccountDashboard.py file must exist if REQUIRED_CONFIGURATIONS exist

    # REQUIRED_CONFIGURATIONS = {'FEATURE': None}

    def __init__(self, application, request, **kwargs):
        super().__init__(application, request, **kwargs)

    @property
    def router(self):
        router = super().router
        router.update({'default': self.default, 'submit': self.submit})

        return router

    async def default(self):
        return {'message': 'Hello World from extension'}

    async def submit(self):
        name = self.form_fields.get('name')
        if not name:
            raise TectonError(
                'Validation failed', {'message': 'Please submit a name'}
            )

        return {
            'name': name,
            'date': datetime.now().strftime("%Y-%m-%d %H:%M:%S")
        }

Now that this is in place let’s move on to the frontend.

Integrating with different frontend frameworks

We will show you how you may integrate the following frameworks with Tecton: