Get Started for FREE
Sign up with Facebook Sign up with X
I don't have a Facebook or a X account
 Your new post is loading...
Your new post is loading...
Scoop.it!
mewt - :seedling: Immutability in under one kilobyte
ArrayUse $set and $unset to create new array with applied change. Use all array instance methods as usual, however those that would normally return a single non-array value (pop, push, shift, unshift) will return an array containing the value and a new array (see part 2 in example below). 
No comment yet.
Sign up to comment
Scoop.it!
Jen Looper explains what observables are, why they are necessary for asynchronous communication and how to use them in an Angular 2 application with RxJS.
Scoop.it!
With today’s modern JavaScript frameworks, we are used to the fact that when the application state changes, the DOM is updated automatically. But how do the frameworks detect state changes, and how do they efficiently propagate the changes through the system? Evan answers these questions based on his experience building Vue.js.
Scoop.it!
MobX is a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming (TFRP). The philosophy behind MobX is very simple: Anything that can be derived from the application state, should be derived. Automatically. which includes the UI, data serialization, server communication, etc. MobX is inspired by reactive programming principles as found in spreadsheets. It is inspired by MVVM frameworks like in MeteorJS tracker, knockout and Vue.js. But MobX brings Transparent Functional Reactive Programming to the next level and provides a stand alone implementation. It implements TFRP in a glitch-free, synchronous, predictable and efficient manner.
Scoop.it!
From
ponyfoo
Earlier this week we took a look at new features coming in ES2016. Today we’ll learn about async / await.The async / await feature didn’t make the cut for …
Scoop.it!
Curious about functional reactive programming? Florian Rappl explains the concepts, working through several examples using the RxJS library.
Scoop.it!
Cycle.js is an extension of the RxJS library more than a framework (though it will probably fall into that category). RxJS is the JavaScript version ofReactiveX, an API for asynchronous programming with observable streams. While RxJS solves the part of composing asynchronous and event-based programs by using observable sequences, Cycle.js does a unique thing by looping data flow between your application and the outside world. We will go into the details how this works later, but this makes explicit data-flow graphs possible; i.e., reasoning of dependencies between operations. Neither Angular nor React (nor any other that I am aware of) does this. This unique feature of Cycle.js has the benefit of making it far more easy to read and understand large code bases.Cycle.js is an extension of the RxJS library more than a framework (though it will probably fall into that category). RxJS is the JavaScript version ofReactiveX, an API for asynchronous programming with observable streams. While RxJS solves the part of composing asynchronous and event-based programs by using observable sequences, Cycle.js does a unique thing by looping data flow between your application and the outside world. We will go into the details how this works later, but this makes explicit data-flow graphs possible; i.e., reasoning of dependencies between operations. Neither Angular nor React (nor any other that I am aware of) does this. This unique feature of Cycle.js has the benefit of making it far more easy to read and understand large code bases.
Hieu Vu's curator insight,
November 8, 2015 6:14 PM
Has anyone used Cycle.js? would be interested to see what this has been used in.
Scoop.it!
From
rrees
This post is only meant to be a snapshot of the current state of the various DOM virtualising webframeworks that are around. I’m partly publishing it to try and discover more that I may not be aware of.
Scoop.it!
From
medium
Isomorphic apps are almost like “normal” apps when creating them with the FRP. Because the FRP encourages you to always pass the entire state object to the rendering function, nothing prevents you to do the same in the backend as well. If you have read other tutorials you may already know that React has a “backend-compatible” function called renderToString. It behaves exactly like render but doesn’t call componentDidMount and returns the rendered HTML as a string instead of placing it into a DOM node. Component & model in → HTML out. Couldn’t be simpler? Well… actually, it could be. There are two gotchas you should know before trying to use renderToString:
Scoop.it!
Arch is a front-end functional style application framework using React as a UI layer. Arch applications are isomorphic out of the box, including form processing. This means you write your application as if it was client-side only and Arch will manage the server-side portion. This also means you don’t get any control over the code running server-side, which is a design decision. The theory behind it is that any server-side code you need to run should sit in a separate server application which you talk to over an API.
Jan Hesse's insight:
Scoop.it!
Baobab gives you the same “one way flow” of state in FLUX, only it reduces a lot of the complexity. The point is that your components never mutate the tree and the actions never return state from the tree. Any change to state is done through an action which changes the tree, which notifies about the change to any components listening to that part of the tree. Baobab handles this very well and it integrates very well with React. First of all we have to get a notion of what we are trying to solve. Even though Baobab up until version 1.0 gave us a great concept for handling state it was challenging to handle “shared data”. Let me explain.
Scoop.it!
Can we do better? Can we combine the simplicity of synchronous code with the efficiency of the asynchronous approach? It turns out we can. Futures are an abstraction that allow us to express the effect of latency in asynchronous computations, encapsulate event-handling code, and use higher-order functions such as map, reduce, and filter, to compose clean and readable asynchronous code. We will explore this by looking at a web-scraping word count example. First, we’ll write simple synchronous code and consider how this code may look rewritten with a callback-based asynchronous framework such as Node.js or Netty. Then, we’ll use promises to turn callback-based building blocks into functions returning futures, allowing us to compose code using functional programming constructs.
Scoop.it!
Computed properties are built on top of the observer pattern, and let us take one or more properties and reactively transform or manipulate their data to return some new value. The computed property updates whenever one of their dependent values change, ensuring that relationships are always kept in sync.
|
Scoop.it!
In my opinion, the best way to building web User Interface is separate the state and the UI. This is what Elm Architecture dose. It separates every elm program into Model, Update and View parts. It’s good. But I am not familiar with functional programming, so do many web UI developers. Though I am not familiar with functional programming, I always learn a lot from it. I love FP because it is a good tool to write less bug and write more maintainable code. This is why I love React too. Every UI component can write as a function of state ((state) => UI), which let you test the UI more easy, just pass different state and expect the return value. Using MobX and React means you get all of it. MobX will take care of the state, React will take care of the View render. And then my framework cans came out.
Scoop.it!
In this blog I will show you how to pick up an existing codebase example and curtail it into your own, beautiful MobX Example App built using React, MobX and the Cosmic JS API to create and remove…
Scoop.it!
One of the most popular FRP JavaScript framework today is — Cycle.js. Although, Recycle uses React, its actually inspired with Cycle.js. Recycle initial version had nothing to do with React and was made as an “opinionated version of Cycle.js”. But, as it turns out, defining components composed of a view, actions and functions responsible for modifying state is a model that can be described without the use of the main function, drivers or complex stream manipulations.
Scoop.it!
From
medium
I really like Cycle.js. It is simple and declarative. But it has two caveats. First it has hard RxJs dependency and that is too much: if I select a rendering library then I don’t want it to constrain my state handling! Second, Cycle’s DOM event subscription system is not practical (regardless how functional and “reactive” it may be): the emitted data must be encoded into DOM (e.g. by using data attributes like data-id=”myId”). Just ugly. Single source of Truth. And its problemsThe state of your whole application is stored in an object tree inside a single store. That is a direct quote from Redux website. The most of the current Flux libraries use combined reducer and this has locked the developers’ mindsets to the fact that the state should be like a mega sized “blob” which is passed to the “dummy” components via props. And there is always an explicit layer which separates the state handling and the UI: the top level “application container”. Perhaps you’ve seen this kind of lines in Redux apps...
Scoop.it!
Unlike most front-end web frameworks, React's aim is to solve the various challenges of building user interfaces that rely on changing data. Although React is a simple JavaScript library and is easy to get started with, it is still possible to misuse it in ways that deny the web app from reaping the benefits that React has to offer. In this article, Toptal engineer Ivan Rogic demonstrates the synergy of React, Redux and Immutable.js, and shows how these libraries together can solve many performance issues that are often encountered in large web applications.
Scoop.it!
Scoop.it!
WebRx is a browser-based MVVM-Framework that combines functional-reactive programming with declarative Data-Binding, Templating and Client-Side Routing. The framework is written in Typescript and built on top of ReactiveX for Javascript (RxJs) which is a powerful set of libraries for processing and querying asynchronous data-streams that can originate from diverse sources such as Http-Requests, Input-Events, Timers and much more.
Dan Mendes's curator insight,
September 1, 2015 4:03 AM
The reactive model continues to gain traction
Scoop.it!
Cerebral is a framework. It provides concepts for handling application state and depends on React for its UI. Routing, http requests etc. are separate tools you choose based on what the project needs. Technically Cerebral does not need React to work. So why would you even consider Cerebral? Before going into the thoughts behind Cerebral I want to point out that this is not another “FLUX framework” with its own take on actions, dispatchers and stores. I am certainly not talking down those frameworks, many of them are really great, but Cerebral is a new take on how to handle application state alltogether. It is inspired by Flux and more recent solutions like Baobab. So big thanks to all the brilliant people working on tools to make web application development more fun than frustrating! Core features
Jan Hesse's insight:
Scoop.it!
From
aryweb
Many people that use ReactJS as their renderer are using some kind of the
Scoop.it!
From
medium
Facebook introduced Flux about a year ago for client-side web application building and since then it has become one of the hottest tech in the web development scene. The task of Flux is to isolate business logic from the user interface logic by using dispatcher, stores and actions. The core idea is the unidirectional data flow which means that actions are propagated through the entire system in response to user interactions but they have no binding to the internal data model. As the name implies, Reactive programming is what React is made for. Actions happen eventually and they propagate through the event streams.Combination of those event streams forms the application’s state. After the event has propagated through the system, the new application state object is consumed by the subscriber and rendered by the root level React component. This makes the data flow dead simple.
Scoop.it!
FOAM is composed of tools to help you quickly write an app that loads and runs fast, on desktop and mobile. Our main goal is to do as much as possible with each chunk of code. The fastest, most secure, and least buggy code in your app is the code that isn’t there. FOAM is a meta-programming framework. It is very declarative and reactive, because that’s a very high-level way of expressing how the app should work.
Scoop.it!
|
