Mobdux: Combining the good parts of MobX and Redux – Cameron Fletcher – Medium

Mobdux: combining the good parts of MobX and Redux  #ReactJS #Redux #Mob

  • In MobX it is easy to structure your stores in a tree-like manner so that at any point you can view the entire state of your application.
  • Additionally, by using MobX in strict mode, you are forced to make any mutations to your state in actions.
  • The combination of a single store, strict mode, and the excellent mobx-react-devtools help give back some of the predictability and traceability of Redux.One of the ways the libraries significantly diverge however, is when connecting your state to your components.
  • Redux on the other hand, recommends the smart component / dumb component pairing so that each component (regardless of where it sits in the hierarchy) can look up everything it needs to render itself.I prefer the Redux approach for a number of reasons:Easier to move things around in your component…
  • Also, we can remove all knowledge of MobX from our dumb components by encapsulating all of this logic in our smart component wrapper, removing the need for the observer decorator entirely.

MobX and Redux give you two opposing ways to manage your state effectively in a React application. As an experiment I attempted to merge the good parts of both approaches, and ended up with a new…
Continue reading “Mobdux: Combining the good parts of MobX and Redux – Cameron Fletcher – Medium”

⚛️ 🚀 Introducing React-Static — A progressive static-site framework for React!

  • How well that static site performs and how easily you can build that site is another story.ProsVery easy to get startedWell documentedConsSubpar developer experience for static functionality no hot-reloadingLarge per-page JS bundles, resulting in a lot of unnecessary duplicate code being downloaded.Difficult root component customizationDestructive routing.
  • We also knew that we needed to ditch built-in proprietary connectors ASAP; being able to get your data from anywhere is important, but the ability to use and access that data in your site is paramount.Most importantly, we needed a tool that would allow us to build things like an…
  • It’s insanely fast, touts fantastic SEO capabilities, and is probably the most React-friendly static-site library on the internet.Let’s get to it.How does it work?react-static starts by exporting a single JS bundle, which includes every template for your entire site.
  • To connect a component to this data, you use a convenient HOC called getRouteProps.The HTML files generated by react-static ensure that pages load instantly and are optimized for SEO.Once the page is loaded, your site invisibly and instantly transitions to your react app.At this point, navigating around your app will…
  • You’ve worked hard enough producing and organizing all of the data for your website, so the last thing you need is some superfluous GraphQL layer or custom component lifecycle lodging itself between your data and your pages.

At Nozzle.io, we take SEO, site performance, and user/developer experience very seriously. Over the last year, we’ve launched many sites using different static site tools that claim to solve these…
Continue reading “⚛️ 🚀 Introducing React-Static — A progressive static-site framework for React!”

Replacing WebSockets with the Auto-Scaling Firebase Database.

  • A very basic implementation of this object (Which I will refer to as a “packet” moving forward) can be seen below:{ type: “Ping”, sentFrom: “client”}This is a simple “Ping” packet that was sent from the client, which means the server’s database observer should pick it up, but what should this…
  • In order to only get the packets from the client we want we’re going to need their user-id, for this example I’m going to use “abcdefghijklmnop” as the user’s Firebase uid.const ref = packets = .
  • on(“child_added”, handlePacket);This will create an observer for user “abcdefghijklnop” which will listen for all packets “sentFrom” the client.
  • endAt to server so that we make sure that the server and client are listening to each other and not themselves.In the handlePacket function you should immediately remove the packet from the database and then continue using any additional information sent with the packet to handle it appropriately.
  • In this case we’re only sending the type and since this is a simple Ping-Pong example, I’m going to simply respond to the client by writing a packet with the type of “Pong” to the database.function handlePacket(snapshot) { var value = snapshot.val(); // Get the packet data if(!

If you’ve ever created an web (or react-native) application that required live updates to be sent to the client from the server, you’ve probably implemented Web Sockets at some point, and if your…
Continue reading “Replacing WebSockets with the Auto-Scaling Firebase Database.”

My hyper-talented friend is looking for front-end dev work (React/JS) from October onwards. His site: . Pls share!

  • I quickly came to depend on Ben’s knowledge and expertise on all aspects of the development of our Backbone.js app.
  • I don’t think the workshop would have been such a success without Ben.”
  • “Ben was able to apply his front-end development and architecture experience from day one, helping us come up with and validate key architecture choices and avoid costly mistakes as we scale Kayako to be used by 10,000s organisations worldwide to support millions of end users.
  • We found Ben’s advice to be realistic and pragmatic, factoring in resource constraints, business needs of the day and balancing those with future scalability benefits.
  • “Ben’s Javascript for Beginners workshop was extremely useful.

I can work with you to plan, architect and review how you can achieve seamless development, so I can impart my knowledge and point you in the right direction. I’m well versed in where and how bottlenecks can appear, but also how to solve and avoid them.
Continue reading “My hyper-talented friend is looking for front-end dev work (React/JS) from October onwards. His site: .

Pls share!”

Building a mobile app in Rust and React Native, Part 1: Project Setup

Building a mobile app in Rust and React Native, Part 1: Project Setup

  • Building a mobile app in Rust and React Native, Part 1: Project SetupThe first post in series ‘building a mobile app in Rust and React Native’.
  • In this series I will describe process of connecting mobile front-end written in React Native with business logic written in Rust.As an introduction to this article, I suggest reading a great series from John Gallagher: Building an iOS App in Rust, Part 1: Getting Started with RustThe app we are building is a mobile wallet for ethereum cryptocurrency.
  • Required toolsnode.js (tested on v7.4.0)npm (tested on 5.2.0)rustup (tested on rustup 1.0.0 (17b6d21 2016-12-15))rustc (tested on 1.19.0 (0ade33941 2017–07–17))cargo (tested on cargo 0.20.0 (a60d185c8 2017–07–13))android_ndk (tested on r13b)Xcode (only, for iOS, tested on Version 8.1 (8B62))$NDK_HOME envarionment variable set to ndk home directory (eg.
  • # iosrustup target add i386-apple-iosrustup target add x86_64-apple-iosrustup target add armv7-apple-iosrustup target add armv7s-apple-iosrustup target add aarch64-apple-ios# androidrustup target add aarch64-linux-androidrustup target add armv7-linux-androideabirustup target add i686-linux-androidNow, let’s create a new project.react-native init our_projectNext, create rust subdirectory, enter it and runcargo new our_projectAfter those steps, the project directory should look like /our_project /Cargo.toml /srcNext, let’s setup makefile the project and place it inside our_project dir.ARCHS_IOS = i386-apple-ios x86_64-apple-ios armv7-apple-ios armv7s-apple-ios aarch64-apple-iosARCHS_ANDROID = aarch64-linux-android armv7-linux-androideabi ios androidios: $(LIB)android: $(ARCHS_ANDROID) sh copy_android.
  • sh.PHONY: $(ARCHS_IOS)$(ARCHS_IOS): %: cargo build –target $@ –release.PHONY: %: cargo build –target $@ –release$(LIB): $(ARCHS_IOS) lipo -create -output $@ $(foreach arch,$(ARCHS_IOS),$(wildcard is a shell script that copies our statically compiled libraries to jniLibs directory.

In this series I will describe process of connecting mobile front-end written in React Native with business logic written in Rust. As an introduction to this article, I suggest reading a great series…
Continue reading “Building a mobile app in Rust and React Native, Part 1: Project Setup”

Microservices with Docker, Flask, and React

  • Then create the new host:

    Once done, set it as the active host and point the Docker client at it:

    Run the following command to view the currently running Machines:

    Create a new compose file called docker-compose-prod.

  • yml and add the contents of the other compose file minus the .
  • Create a new folder called “nginx” in the project root, and then add a Dockerfile:

    Add a new config file called flask.conf to the “nginx” folder as well:

    Add an service to the docker-compose-prod.

  • yml:

    And remove the exposed from the users service and only expose port 5000 to other containers:

    Build the image and run the container:

    Add port 80 to the Security Group on AWS.

  • yml file:

    Next, we need to update the active host.

Follow the instructions here to sign up for AWS (if necessary) and create an IAM user (again, if necessary), making sure to add the credentials to an ~/.aws/credentials file. Then create the new host:
Continue reading “Microservices with Docker, Flask, and React”

Mobdux: Combining the good parts of MobX and Redux – Cameron Fletcher – Medium

  • In MobX it is easy to structure your stores in a tree-like manner so that at any point you can view the entire state of your application.
  • Additionally, by using MobX in strict mode, you are forced to make any mutations to your state in actions.
  • The combination of a single store, strict mode, and the excellent mobx-react-devtools help give back some of the predictability and traceability of Redux.One of the ways the libraries significantly diverge however, is when connecting your state to your components.
  • Redux on the other hand, recommends the smart component / dumb component pairing so that each component (regardless of where it sits in the hierarchy) can look up everything it needs to render itself.I prefer the Redux approach for a number of reasons:Easier to move things around in your component hierarchy.No pass-through props, where a component forwards props to its children despite not needing them for its own rendering.Easier to test / re-use / write storybook stories for the dumb components that are only interested in rendering.Dumb components are completely decoupled from Redux, allowing for re-usability if the consumer decides to change state frameworks (to MobX or relay for example).
  • Also, we can remove all knowledge of MobX from our dumb components by encapsulating all of this logic in our smart component wrapper, removing the need for the observer decorator entirely.

MobX and Redux give you two opposing ways to manage your state effectively in a React application. As an experiment I attempted to merge the good parts of both approaches, and ended up with a new…
Continue reading “Mobdux: Combining the good parts of MobX and Redux – Cameron Fletcher – Medium”