The C4 Model for Software Architecture

Software architecture diagrams are a fantastic way to communicate how you are planning to build a software system (up-front design) or how an existing software system works (retrospective documentation, knowledge sharing, and learning).
However, it’s very likely that the majority of the software architecture diagrams you’ve seen are a confused mess of boxes and lines.
www.infoq.com/articles/C4-architecture-model

json2typescript – npm

NPM Package for converting from JSON to TypeScript object.

json2typescript In Angular 2 applications, everyone consumes JSON API’s from an external source. Type checking and object mapping is only possible in TypeScript, but not in the JavaScript runtime. As the API may change at any point, it is important for larger projects to verify the consumed data. json2typescript is a small package containing a helper class that maps JSON objects to an instance of a TypeScript class. After compiling to JavaScript, the result will still be an instance of this class. One big advantage of this approach is, that you can also use methods of this class.

Source: json2typescript – npm

cors-proxy-server – npm

I wanted to try out some Angular code against a demo odata service, but when requesting data from another domain in a web browser (the angular context) you might get:

Access to XMLHttpRequest at ‘http://services.odata.org/V4/OData/OData.svc/Products?$format=json’ from origin ‘http://localhost:4200’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: Redirect is not allowed for a preflight request.

To get around this problem you could use a node proxy like this one:

Source: cors-proxy-server – npm

Install and start it up. Now we can call the odata service by prepending the proxy url before the actual api endpoint like this:
http://localhost:9090/http://services.odata.org/V4/OData/OData.svc/Products

Notice the double http://

The entire CORS problem can be summarized like this:

The web browser will prevent javascript to get a response from the service at domain x if that server does not explicitly say its ok to respond the remote caller. In our case our source domain is ‘localhost’ and the services.odata.org haven’t added that as a valid domain to respond to according to the web browser.

More info regarding CORS here: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Angular – Template Binding Syntax

Binding syntax: An overview

Data binding is a mechanism for coordinating what users see, with application data values. While you could push values to and pull values from HTML, the application is easier to write, read, and maintain if you turn these chores over to a binding framework. You simply declare bindings between binding sources and target HTML elements and let the framework do the work.

Angular provides many kinds of data binding. This guide covers most of them, after a high-level view of Angular data binding and its syntax.

Binding types can be grouped into three categories distinguished by the direction of data flow: from the source-to-view, from view-to-source, and in the two-way sequence: view-to-source-to-view:

Source: Angular – Template Syntax

A Study Plan To Cure JavaScript Fatigue

A Study Plan To Cure JavaScript Fatigue by Sacha Greif

I’m going to give you a concrete, step-by-step study plan to conquering the JavaScript ecosystem.

Who Is This For
This study plan is for you if:

You’re already familiar with basic programming concepts like variables and functions.
You might have already done back-end work with languages such as PHP and Python, and maybe used front-end libraries such as jQuery for a few simple hacks.
You now want to get into more serious front-end development but are drowning in frameworks and libraries before you’ve even started.

https://medium.freecodecamp.org/a-study-plan-to-cure-javascript-fatigue-8ad3a54f2eb1

Real world example code for popular front-end and back-end frameworks

This is taken from Jon Hilton, Quick Tip Friday newsletter.
You can subscribe to the newsletter here: https://jonhilton.net/

Its a great tip regarding example code for popular web frameworks (also mobile in the works), for example ASP.NET Core on the backend side and Angular or Vuejs on the frontend side etc. See list of backends and frontends here: (scroll down there are many options…)
https://github.com/gothinkster/realworld 

Building software applications is hard, but doing it in isolation is even harder.

And, unless you’re one of the fortunate few who work in a perfectly balanced team with just the right amount of experienced developers to lean on, you’re often left figuring all this stuff out for yourself.

· Architectural best practices

· How to organise your code

· How to separate your concerns

· Which ORM to use

· How to KISS (keep it simple stupid) and avoid incurring loads of technical debt

But, just because you haven’t got a supportive, experienced and wise team physically on your doorstep doesn’t mean you have to re-invent all the wheels yourself!

Specifically I really want to recommend you check out the “real world” examples over at https://github.com/gothinkster/realworld.

There, they take the exact same application (a Medium clone) and show examples built in all manner of front-end and back-end frameworks.

So if you’re looking to see what a good ASP.NET Core API application looks like (or React, Angular, Vue.js or anything else you can think of)