.NET Core - MVC

Observations about .NET Core, MVC and converting YetaWF from ASP.NET MVC5 to .NET Core MVC. The new .NET Core has great new features. Getting there from an existing MVC 5 app is HARD!

TypeScript and JSX without React

08/02/2017

I'm a big fan of React. I also love JSX. And TypeScript, or really anything that's more type-safe than JavaScript.

Unfortunately, I don't have the luxury of rewriting all the sites I have in React. All the sites I maintain and run are based on YetaWF. It offers Single Page Sites, Static Pages, but doesn't use any of the "cool" new frameworks. Instead, it implements its own framework where server-side and client-side work closely together to accomplish the same goal as React, Angular, Vue, etc. which are exclusively client-side frameworks. There are actually some disadvantages to these frameworks. Like server-side rendering to load the initial page, SEO and Analytics. These can be overcome with some extra work. But they also have huge advantages. Client-side code development is truly super-simple and awesome. Because YetaWF is a tightly coupled server-side and client-side framework, it actually doesn't have any of the initial page load, SEO and Analytics disadvantages. Without any extra work.

All the client-side frameworks use new JavaScript standards, like es6, etc. These truly are awesome. JavaScript is such a hack by being a type-less, everything goes language. The larger your code base, the more you'll appreciate a strongly typed language.

Another feature that React uses is JSX. JSX makes it super simple to create HTML elements in your JavaScript (TypeScript) code.

So instead of using document.createElement, you can create an element like this in TypeScript:

var dtPick: HTMLElement = <input name="dtpicker" />;

I guess you knew that already.

You can enable JSX in your Visual Studio project that uses TypeScript simply by adding files with the TSX extension.

But if you're not using React that won't really do much for you. However, you can implement your own React.createElement function. And even rename it.

In your tsconfig.json file add a jsxfactory element:

  "compilerOptions": {
    . . .     
    "target": "es5",
    "module": "none",
    "declaration": true,
    "jsx": "react",
    "jsxFactory": "YetaWF_Basics.createElement",
    . . . 
  },

Now the function called to instantiate the actual elements is called YetaWF_Basics.createElement.

Of course this function doesn't exist, but it's easily implemented. Here is a sample implementation:

class YetaWF_BasicsServices {
    /**
     * React-like createElement function so we can use JSX in our TypeScript/JavaScript code.
     */
    public createElement (tag: string, attrs: any, children: any): HTMLElement {
        var element: HTMLElement = document.createElement(tag);
        for (let name in attrs) {
            if (name && attrs.hasOwnProperty(name)) {
                var value: string | null | boolean = attrs[name];
                if (value === true) {
                    element.setAttribute(name, name);
                } else if (value !== false && value != null) {
                    element.setAttribute(name, value.toString());
                }
            }
        }
        for (let i:number = 2; i < arguments.length; i++) {
            let child:any = arguments[i];
            element.appendChild(
                child.nodeType == null ?
                    document.createTextNode(child.toString()) : child);
        }
        return element;
    }
}

/**
 * Basic services available throughout YetaWF.
 */
var YetaWF_Basics: YetaWF_BasicsServices = new YetaWF_BasicsServices();

Life is good with TypeScript and JSX.

1 Comment Pending Approval

Be the first to add a comment!

Add New Comment

Complete this simple form to add a comment to this blog entry.