JavaScript for Line of Business Applications

In the past I've given presentations, recorded videos, and written blog posts about fixing common JavaScript and jQuery bugs. This is a good skill to have, but what about working code? Fixing broken code is important, but have you ever gotten into the situation where your code works, but it doesn't feel quite right... maybe even smells?

It’s important to note that with React with Flux, the application state lives outside of the UI-components, in the store(s). The stores populate their state according to the actions and the UI merely reflects this state. A UI defined with React can be seen as a pure function: given the same input (state), it will always produce the same output (ui).

Flux was inspired by CQRS and Event Sourcing. For those unfamiliar: think think of it as a simple version control system: each action is a commit, all consecutive commits give you the current state.

To record actions in Flux, we need to either extend the dispatcher with this functionality or create a new component which listens to the dispatcher. I’ve published a proof-of-concept on GitHub called FluxRecorder, which does the latter.

As discussed above JavaScript supports both OOP and FP. It also turns out that it is very easy to add support for AOP to JavaScript by writing a simple library. JavaScript allows to easily redefine methods, add properties to objects during execution time, and also functions are objects in JavaScript. As a result a full-fledged Aspect Oriented Framework in JavaScript is only about 150 lines long as you will shortly see.

Our library will support the following:

• Aspect – just functions, as almost everything in JavaScript is a function
• Advice – “before” before method, “after” after method, “afterThrowing” when an exception is thrown, “afterReturning” just before returning a value from a function, “around” at the moment of function execution
• Pointcut – “methods” all the methods of an object, “prototypeMethods” all the methods defined on the prototype of an object, “method” only a single method of an object

Contents:

1. Always Use Asynchronous Methods
2. Never require Modules Inside of Functions
3. Save a reference to this Because it Changes Based on Context
4. Always “use strict”
5. Validate that Callbacks are Callable
6. Callbacks Always Pass Error Parameter First
7. Always Check for “error” in Callbacks
8. Use Exception Handling When Errors Can Be Thorwn
9. Use module.exports not just exports
10. Use JSDoc
11. Use a Process Manager like upstart or forever
12. Follow CommonJS Standard

While the Flux pattern may have found a new home in JavaScript applications, they have been explored before in Domain-Driven Design (DDD) and Command-Query Responsibility Segregation(CQRS). I think it is useful to learn from these older concepts, and see what they may tell us about the present.

1. Give an overview of the Flux architecture.
2. Present the CQRS pattern.
3. Look at how Flux applies the concepts from CQRS.
4. Discuss when Flux is useful for a JavaScript application.

In software engineering, a design pattern is a general reusable solution to a commonly occurring problem within a given context in software design. A design pattern is not a finished design that can be transformed directly into source or machine code. It is a description or template for how to solve a problem that can be used in many different situations. Patterns are formalized best practices that the programmer can use to solve common problems when designing an application or system. Object-oriented design patterns typically show relationships and interactions between classes or objects, without specifying the final application classes or objects that are involved.

The 23 Gang of Four (GoF) patterns are generally considered the foundation for all other patterns. They are categorized in three groups: Creational, Structural, and Behavioral. This small web application explains these patterns and gives examples on how you can use these patterns in TypeScript.

• Easy to lint, Common rules
• Easy to lint, Fresh rules
• Easy to lint, No rules
• Hard to lint, Subjective rules

The unique challenges faced in writing third-party JavaScript revolve around the same-origin policy. Because the JavaScript file is based on a different domain to its host, inbuilt browser security places restrictions on cookie use and client-side/server communication. 

By using jQuery for prototyping, you will be deferring full browser support issues until a little later in the project timeline, but by then you should have gained a better understanding of the unique problems inherent when writing third-party JavaScript.