Author: jonathanb

  • Attractors Returned

    About a month ago, I posted an in-flight doodle of an attractor, which turned out to be a spirograph. I’m returning here with the correction for a Clifford attractor.

    The result plots a constellation of points, rather than a path — consecutive points in the series are not necessarily close to each other — so many iterations (say 25,000) might be required to paint a “pretty” picture.

  • React, Redux, and Typescript

    Talking with a react-redux user earlier this year, I thought I should probably get with the program and learn some sort of state-management framework. I’m posting my notes from getting started with Redux applied to React and Typescript, hopefully so others and my future self can quickly jump into the ECMAscript pot-pourri.

    Redux

    The react-redux primer provides a gentle introduction to a rather disjointed framework. Honestly, Redux looks like it was extracted from a webapp following good design patterns without much regard to usability on the framework for developers outside the original project.

    Redux prescribes a framework to

    • use “immutable” application state objects (there’s no enforcement of immutability)
    • invoke actions as pure functions to build a new state from a previous state
    • store and dispatch actions for agents/components/etc driving state changes and agents/components/subscribing to state changes to respond.

    The result compartmentalizes all of your application logic from presentation, making things easy to compose and test, though not necessarily to read. Much of the processing in Redux just building objects to represent state or dispatch and there’s no support from ECMAscript to flag usage errors, so it’s easy for users make mistakes wiring up components or violate “immutability”.

    To add to any confusion documentation overloads the word “action” to mean a token describing which action to take, a factory to create the token, and the actual processing action. Combined with React, the term “state” is overloaded, sometimes denoting application state driving Redux, and sometimes the changing qualities of a React component, driving rendering.

    Mix in Typescript

    With the far-flung objects and files, having some compiler help would seem appreciated. In fact, using Typescript detects a lot of wiring mistakes early, but with several costs, especially since the Redux-with-Typescript introduction is pretty thin.

    Experimentation

    My experience incrementally adding Typescript to a sample project illuminated several benign mistakes, mostly surrounding polluted types. It’s easy to conflate the React properties of simple React components and those wired for Redux, or just to omit the former and use exclusively the latter — don’t do it!

    The benign mistakes are infuriating, since an app made with create-react-app will initially render and run…. and then halt once the Typescript compiler finds an error. The prevalence of these sorts of errors might discourage one from experimenting or refactoring. On the up-side, at least the default set up for unit-tests with Jest is more lax than the app served by react-scripts start.

    Versioning

    React has gone through so many versions and patterns, it can be difficult to align your usage with documentation and examples… and type definitions! Especially with the onset of React render and useState hooks, and the lag in update to declaration files.

    Dealing with Dynamic Types

    Redux leverages dynamic typing in ECMAscript to compose state and reducers as well as to decorate/inject React components with actions. The result can be a nightmare of tangled union types for you and the Typescript compiler.

    Where the Rubber Meets the Road

    Redux builds React component properties with react-redux.connect() a curried function taking two parameters, usually called mapStateToProps and mapDispatchToProps, each functions as well.

    Components respond to state changes with mapStateToProps(), which translates the application state to component properties. At minimum, the function should pull out the relevant fields to build some of the property fields for the component. Make sure to forward along only fields relevant to the component, as the Typescript compiler will infer types and throw an error if the JSX instantiating the component is missing the field.

    The dual to mapStateToProps() is mapDispatchToProps(), which allows components to forward messages to the reducer for state updates. The property fields that the function builds are methods to which components wire DOM events.

    You build a regular/simple React component, which you then pass to connect() which is used by react-redux to build a factory to create connected React components. It’s useful to distinguish simple from connected component classes, especially the property types used by the two:

    • You will export the connected components for JSX use. The connected components will likely have simplified properties, probably (hopefully) silently inferred by the Typescript compiler.
    • The simple components have all the property fields, which you will explicitly define, many of them actions, used to wire up and respond to DOM events.

    Tersely, mapStateToProps() provides property fields used for rendering; mapDispatchToProps() provides property fields that are functions to drive state changes. The union of the two should fill out the simple component property type.

  • Summer Projects

    This past week I attended the Carlo Aonzo Mandolin Workshop in Milwaukee. The program featured two baroque components: excerpts from the Bach Orchestra Suite No. 2 in B minor, BWV 1067; and Handel Concerto Grosso, Op. 6, No. 7 in B-flat major, HWV 325. Each of them feature basso continuo, a moving bass line with low harmonies. Another workshop participant, G, suggested forming a group to play a Dvořák mandolin quartet, and here are my notes sketching out two summer projects exploring those two ideas.

    Telemann Sonata in E Minor for Viola da Gamba and Basso Continuo

    Last year I took a crack at playing Telemann’s Sonata in E minor (and A minor) on viola. The viola parts have enough melody to carry the part solo. The slower movements have lots of off-beat onsets, and the faster parts are busy, each contributing towards a non-trivial duet. Spending four long days playing above basso continuo, sometimes in unison with other sections, and sometimes in counter point, I gained some confidence to return to playing a duet with S playing cello.CantabileMelody phrases frequently start on the 4 &. The conclusion has some unusual (challenging) accidentals, implying harmonic minor seventh chords, which appear throughout both sonatas.AllegroThe piece has a fixed bouncy timing to most measures — two three-note tuples, with the first pair of each slurred. The resulting bowing entails two quick up-bows, creating a bouncy feel, similar to a jig. The challenge here is to maintain consistency.RecitivoThe varied timing/syncopation of the melody phrasing is tough to get precisely.Vivacevivace!

    Dvořák String Quartet No. 12, Op. 96 (I. Allegro ma non troppo)

    The back story is easy to find. Dvořák vacations in Northeast Iowa where he writes a string quartet drawing the melody from Native and African-American traditional songs as well as bird calls. I’m not sure I have been able to attribute the melody, but quartet sounds like a modern film score to me, or perhaps Oklahoma!, though I wish I could articulate better why. My recollection of modern-art classes from college is that it was fashionable at the time to draw (appropriate?) from “primitive” cultures for use in modern art, famously Picasso and Bartók.

    I’m working with both the IMC and Bärenreiter Verlag versions, which, aside from binding and copyright, appear to be identical. The Modern Mandolin Quartet recorded Number 12 on their 2012 album, Americana.

    Landmarks and Notes for Mandola Players

    Theme, m. 3-6: The mandola part kicks off with the 4-bar theme, which repeats with a key change in section 6, and again in section 12. Nail those few bars to make the melody sing out (match;) for the violins.

    Pedal, m. 7-10: M1 echoes the melody immediately following the mandola. The two voices swap, with mandola now pedaling on 16th note pairs in thirds hovering below the mandolin parts. Bowing, it probably makes sense to stay on one string, but picking on the mandola, I think alternating strings provides a good base — the dynamic is pp, so the decay/ringing is quiet in comparison to M1.

    Passing runs, m. 11-14: The next 4 bars have each of the voices passing 4-sixteenth note runs between each other. The cello plays the run on the 1, passing it to M2 on the 2, M1 on the 3, and mandola on the 4.

    Support melody, m. 20-23: M1 has the melody from the intro again. The mandola supports, but during the first bar there are just simple eighth-note pulses. The second has the familiar pedal, an octave up from before. The third and fourth bars supporting the melody have the pedal wander a bit, providing some color. Again, alternating strings makes sense, and avoids position shifts.

    Steps, m. 24-35: The voices each have bars of anxious percussive-sounding steps during the section.

    Beatles-esque melody, m. 44-53: Following the ritard at the end of section 3, the tempo returns with M1 playing a melody that reminds me of “In My Life”, of course predating John Lennon’s birth. The familiarity for me provides a good landmark, though with the preceding diminuendo and ritard, there should be some explicit coordination among the players.

    Theme reappearance, m. 61-71: The theme repeats in Section 6 for the viola again, though with some modulations. Following, there are varied accidentals in the pedal, which moves faster than in the introduction.