To demonstrate my front-end web skills in 2017, I've replicated a five-year-old front-end from my commercial real estate finance site sizemymultifamilyloan.com in React and in Angular 2. The original was done in CoffeeScript on Backbone and depended on the Rails 3 asset pipeline. I chose React and Angular for the replicas due to their popularity and to my comfort in the quality of their ongoing support by Facebook and Google.
Note: The current linked versions do not express best practices—later releases (see below) will make the replicas responsive, etc.
The React replica is live at gpolyn.github.io/react-fha; the code is at github.com/gpolyn/react-ui-fha-multifamily.
The Angular replica is live at gpolyn.github.io/angular-fha, which a project page at gpolyn.github.io/angular-ui-fha-multifamily discusses in detail.
(The sizemymultifamilyloan.com code is at github.com/gpolyn/fha-multifamily, where vendor/gems/sec223f_acquisition-0.0.1 and vendor/gems/sec223f_refinance-0.0.1 express the roots of the business logic.)
I observed a few constraints in developing my React and Angular replicas.
- The replicas would be coded by contract, specifically, distinct components would be given as Typescript interfaces.
- The DOM structure and CSS style for the original front-end would be retained wherever possible.
- The replicas would anticipate that multiple users could share state simultaneously, for example, through a Firebase backend.
Angular's dependence on Typescript prompted condition 1, plus I had 'programmed to contract' before—for a 2009 Java Developer Certification—and I liked the approach. Under condition 1, for example, specific knowledge of component data fields could be delegated at the contract level in the replicas, while ignored at the app level (albeit with unexamined consequences for database design.) Condition 2, meanwhile, led naturally to the formulation of condition 1's interfaces. Finally, condition 3 led me to borrow from Reactive programming.
Note: The following releases are not necessarily in order.