Customization and Coding Mechanisms in Docly: An Overview

Docly is rapidly gaining traction as an express coding platform, offering developers a seamless experience in both front-end and back-end development. This blog post aims to shed light on the various customization and coding mechanisms available in Docly, making it a go-to choice for many developers.

Unified Language: JavaScript

Docly's strength lies in its simplicity. By using JavaScript for both front-end and back-end development, it eliminates the need to switch between different languages, ensuring a consistent and streamlined coding experience.

Front-end: Developers can incorporate any HTML, CSS, or JS to design and animate their web pages.
Back-end: Docly allows developers to read and process requests using JS files placed in the #/API folder. This means you can handle data, interact with databases, and manage user requests, all within the same language.

> Example: Backend JS in the #/API folder

#/API/Test.js

    // query.<parametername> here are query params
    // form.<fieldname> here are form values
    
    const data = {
        message: "Hello from Docly's backend!"
    };
    return data;

This end point would be accessible from this url [siteurl]/API/Test

HashJS: Javascript Server-Side Rendering with a Twist

HashJS is Docly's unique server-side rendering mechanism. It's reminiscent of Razor syntax but uses the '#' symbol instead of '@'. Here's a quick breakdown:

Direct Binding: To bind data directly, you can use the syntax #field# or #obj.field#.
Conditional Statements: For conditions, the syntax is #if (a==b) {# for the start and #}# for the end. This makes it easy to incorporate dynamic content based on specific conditions.

Typically, developers use HashJS to server-generate HTML files. However, it's also common to bundle JS and CSS. Moreover, generating files like robots.txt using HashJS is a breeze.

> Direct Binding Example:

<p>Welcome, #username#!</p>

> Conditional Statements Example:

#if (user.isLoggedIn) {#
    <p>Welcome back, #user.name#!</p>
#} else {#
    <p>Please log in to continue.</p>
#}#

File Extensions and Accessibility

To activate the HashJS engine, files should have the .hash extension. For instance, a file named css.hash can be accessed from client requests without the .hash suffix. For HTML files, you'd simply use the .hash extension without adding .html before it.

> Example: Generating a CSS File with HashJS

If you have a file named styles.css.hash, you can integrate dynamic styles based on certain conditions:

body {
    background-color: #defaultColor#;
    #if (user.theme == "dark") {#
        background-color: #darkColor#;
    #}#
}

This file will be availabe at the client with-out .hash behind, meaning [siteurl]/styles.css and will get the mime type header for a CSS file.

Bundling and Optimization

Docly understands the importance of performance. By allowing developers to bundle JS and CSS, it ensures faster load times and a smoother user experience. This is especially crucial in today's web ecosystem, where every millisecond counts.

> Example: Bundling JS with HashJS:

Imagine you have two JS files, script1.js and script2.js. Using HashJS, you can bundle them together in a bundle.js.hash:

#include("script1.js")#
#include("script2.js")#

This file will be availabe at the client with-out .hash behind, meaning [siteurl]/bundle.js and will get the mime type header for a JS file.

Conclusion

With the provided code examples, it becomes evident how Docly simplifies and streamlines the development process. The platform's unique features, combined with the power of JavaScript and HashJS, make it a formidable tool for modern web development.

Furthermore, an essential advantage of diving into Docly is that you're essentially mastering JavaScript. Unlike other platforms that require learning proprietary languages, which might become obsolete or less relevant over time, JavaScript is a cornerstone of web development. Its ubiquity and versatility mean that the skills you hone while working with Docly will always be valuable and transferable across many other projects and platforms.

By choosing Docly, you're not just investing in a tool; you're investing in a skill set that stands the test of time.