From Ember to React, Part 2: Baby, Bathwater, Routing, etc.
Abstract: Last time, which was too long ago, I explained why Ember is terrible and must be burnt to the ground. This time I'll begin to explain why it's not actually all terrible and we should run back into the burning building to rescue the good parts. This will lead us to answer the question: can React Router be used with MobX?
From Ember to React, Part 1: Why Not Ember?
Abstract: We just replaced our entire Ember codebase with a new one written in React, TypeScript and MobX. It was a pretty engrossing couple of weeks. THIS IS OUR STORY.
Box 'em! - Property references for TypeScript
This concerns quite an abstract, simple building block, but it is a neat tool for use with React and MobX. In MobX there's a utility observable.box (docs). But I don't want to use that create all my properties and have to put .get() after every read access. I want to use the cool @observable decorator and just fetch my properties directly, and assign new values with =. What I need is a way to box a property. Oh, and it better be statically type checked in TypeScript.
For the overall idea, see the project page, or just look at the takeaway:
TypeScript - What's up with this?
JavaScript's this keyword is horrible. The value it assumes inside a function depends on precisely how the function is called:
Immuto - Epilogue
It's been a couple of months since I had a scrap of time to do anything with Immuto - I've been up to my knees in WPF/C# instead (working for a living).
This break has given me a new perspective (aside from the obvious one that WPF is yucky). The executive summary is that I don't see myself ever using Immuto seriously. The way I look at it now is almost as a satire on the rigid idea of "single reducer function for the whole application state". It wasn't intended that way! I was genuinely into it and was expecting to use it in my job. But now it looks very different. And as Immuto is just a flavour of Redux, it's a broader comment on Redux itself.
What do I mean by a satire? I mean it's like I was trying to show the absurdity of something by pretending to take it seriously. (Except I was taking it seriously). My dad told me a story from around 1969 when he went to a conference. The latest hot debate topic at the time was Goto Considered Harmful, and some speaker put some source code on the overhead projector and invited the room to critique it. Hands went up and all the suggestions were to get rid of the GOTOs, of course. So as a group they began editing the code to try and get rid of the GOTOs and be good Structured Programmers, and the structure of the program become more and more absurd and unreadable as the exercise progressed.
Immuto - Radical Unification
Immuto continues to evolve rapidly. To ensure that I comply with Semantic Versioning, in which major version 0 implies an unstable API, I've been making major breaking changes every day or so.
The major shift since the first write-up is left-to-right cursor composition. Example - here's the signature of a function that gets a book from a shelf:
Immuto - Working with React (An Example)
UPDATE - I'm in the move-fast-and-break-things phase so a couple of details in here are already out of date. In particular, properties are now unified with cursors. See the various repos for details.
In Immuto - Strongly Typed Redux Composition I introduced the Immuto library by coyly describing a wish-list of features, as if I hadn't already written the darn thing. Shucks!
What I didn't do was show how to make a working UI in React, using Immuto to define all the actions and the structure of the store. The missing piece is another package:
Immuto - Strongly Typed Redux Composition
What's good about Redux, I once asked, and I answered with a few things. Like React, it is one of those rare outbreaks of sanity that happen now and then. Read the docs, they're easy.
There's very little to the library (which is a good thing), because the main thing it implements is the store, which in its basic form is a very simple idea. I noted before how it says very little about composition patterns. I want ways of plugging reducers together, but with complete static type safety, so that it is not possible to dispatch the wrong kind of action, or an action whose data is not of the right type.
One composition feature is combineReducers, which from a static typing perspective leaves us nowhere to go. Sometimes this happens because TypeScript is lacking some capability, but sometimes it's just because the library has done something undesirable and I think that's the case here, for reasons I will now go into at great length.
TypeScript - What is a class?
In TypeScript, a class is really two types and a function. One type is the type of the function itself, and the other type is the type of the object returned when you call the function. Try this:
TypeScript and runtime typing - EPISODE II
Prompted by a revealing comment from Anders Hejlsberg.
Something wonderful happened between typescript@beta and typescript@rc (i.e. just in time for version 2.0).
Way, way back in TypeScript 1.8 (February 2016!) we gained the ability to use string literals as types:
TypeScript and runtime typing
Prompted by this question on Reddit.
I'd want to declare a type that points to class extending another class. Please note, a CLASS not INSTANCE. I've tried something like this:
type EventClass = class extends Event;
type Listener = (data: class extends Event) => void;and later on:
private handlers: Map<EventClass,Listener[]>;But unfortunately this syntax does not work. How I can declare a type that points to CLASS extending another CLASS?
You want a runtime value that specifies a type of event, so you can use it as the key in a Map.
TypeScript multicast functions
Just as in JavaScript, C# functions are first class entities - you can pass them around in variables. There are two ways that C# differs from JavaScript.
a method's
thisreference is automatically bound to the object it belongs to. In JS a "method" is just an object property that happens to contain a function. If copied into a separate variable and then called, there may or may not be a problem depending on whether the function internally refers tothis.a function value (known as a "delegate") has operators
+,-,+=,-=that allow it to be combined with other compatible functions to create a new single function that, when invoked, causes the constituent functions to be invoked.
Introducing doop
As great as Immutable.js is, especially with a TypeScript declaration included in the package, the Record class leaves me a little disappointed.
In an ordinary class with public properties we're used to being able to say:
TypeScript is not really a superset of JavaScript and that is a Good Thing
Questions:
- What does it mean for a programming language to be a superset of another programming language?
- What's a programming language?
- What's a program?
In this discussion, a program, regardless of language, is a stream of characters.