WebCoding.md

Web Coding

We work with Svelte, tailwindcss, & TypeScript for our front-end; then C# for our back-end.

Svelte

File Naming

• Use PascalCase for non-route svelte files.
• Use camelCase for TS files.
• Use kabob-names for URL paths.

Script Section

Include the lang="ts" attribute onto your script starting tags of .svelte files.

For readability, order the contents of your script section by the order of:

• imports
• exports
• types
• consts
• lets
• $:
• event handlers (onMount, etc.)
• functions

TypeScript

Naming

• Use PascalCase for class and type names.
• Use camelCase for method and variable names.
• For the propeties of a class, public properties should adhere to camelCase and private properies should adhere to _underscoreCamelCase.
• Unlike C#, don't add the Async suffix to TypeScript methods.

Declarations

In the same way var is used in C# (don't use var in TypeScript) to reduce redundant code, if your let or const declaration assigns a value with a clear type, then you don't need to specify the type.

let x = 0; // ": number" not required in this case. 

API Function Naming

When going communicating between the front-end and back-end, the name of the class and function should match. Use an ActionObject/action-object approach for naming these.

public class GetGithubAccounts : FunctionBase
{
    public GetGithubAccounts(ILogger<GetGithubAccounts> logger) : base(logger) { }

    [Function("get-github-accounts")]
    public async Task<HttpResponseData> Run([HttpTrigger(AuthorizationLevel.Anonymous, "post")] HttpRequestData requestData)
    {
        // ...
    }
}