APP Standard Practices

Hi team,

Any best practices/coding standards for developing an Airkit app if there is any document available it would be helpful

ex: If i have created an form does it need to follow any standard for webflow , button ,label,input tag and connection

hi @tanmay.sardar, what kind of best practices are you looking for? Like naming conventions?

@ismaen yes naming convention beside that variable also and any other practice to follow while designing the webpage

Got it! Great question! So some best practices when it comes to naming in Airkit is really about consistency in my opinion. You want to make sure that your variables, web pages, data flow inputs… etc all follow the same pattern-- whether its camelCase or snake_case or any other case, its really up to the developer.

These are the practices that I try to follow, though I know it varies from each builder!

Naming Conventions

Web Flows

  • I make my webflows human readable and use it to describe the workflow
  • Example: Terms and Conditions Flow

Web Pages

  • Used to describe the particular page. I like to add the word “page” on each web page
  • Example: Home Page or Confirmation Page

Web Controls

  • These should describe what the control represents. This makes it easier to parse through your tree.
  • Example: Container → Section Container or a title label → Header

Variables

  • I like to use snake_case to name my variables. If i’m have an input control, i would normally have the input control be something like the input it’s capturing and append input at the end.
  • Example: instead of text_input → first_name_input

Design

From a design perspective, best practices are to try to reduce the amount of style overrides you do. That means managing the styles in the inspector of a control. I would recommend to manage and change your styles in the variants in Theme builder so that you have consistency across your application, and that all/most styles are essentially inherited from your themes. This will help in the long run as you build out bigger and more complex applications.

Hope this is helpful!

1 Like

These are all good points!

One other thing I would add is that, whenever it’s relevant (whenever a UI component depends on the value of a variable), is to make sure you include a dummy value in the Variable Tree, so that you can confirm how styling elements look in the Stage without having to preview.

1 Like

Thank you for the update