Understanding the Redux paradigm
Lately I’ve been hearing a lot about Redux, it’s very trendy among my peers here at Tryolabs. It is so trendy that even one hard core backend developer who hated UI development started to love it just because of Redux. With this as a tipping point I decided that it was time to get my hands on it. If you’re used to MVC based architectures and want to know more about Redux, this post might be of help.
fetch-it: enhanced HTTP client based on fetch
Hello world, we’re presenting fetch-it: an enhanced HTTP client based on fetch. For those of you who are not familiar with fetch, here is a formal definition: The Fetch API provides an interface for fetching resources (e.g., across the network). It will seem familiar to anyone who has used XMLHttpRequest, but the new API provides a more powerful and flexible feature set. Since discovering new things is very (very) exciting, I’ve been testing fetch for a while.
How to track user actions and make sense of them: Segment + MixPanel
Trying Flux with NuclearJS
Introduction A few weeks ago I had the opportunity to attend to JSConfUY and represent the Tryolabs team. The conference was great! There were a couple of interesting talks that caught all my attention, both showed a new (at least to me) architecture to be used in web applications. What I found interesting was the unidirectional data flow between the components of the architecture. Facebook uses this new architecture in its web application and it’s naming it Flux.
Building a Kanban App in React
This example is basically a Trello clone: We have a set of lists of tasks (“Todo”, “Done”), and each holds some tasks. We can add tasks, delete them, or drag them from one list to the other. We’ll React DnD for drag-and-drop and a simple Python server for persistence. August 2018: Please note that this post was written for an older version of React. Changes in the code might be necessary to adapt it to the latest versions and best practices.
Drag and Drop in React
This is an example of implementing drag and drop functionality using React. This is the first example where we’ll use an external library, in this case, React DnD. August 2018: Please note that this post was written for an older version of React. Changes in the code might be necessary to adapt it to the latest versions and best practices. Components This example will have two major components: Bin, a component where objects can be dropped, and Item, an item that can be dragged and dropped.
A Reusable Modal Component in React
This is an example of creating a reusable modal component with React that supports CSS animations. You can find the source code here. It would be fairly easy to create a specific modal component that is mounted and unmounted by toggling a bit of state in the parent component. However, what we want is a little more complex: We want a reusable modal component, that you just wrap around the modal’s contents, add some props, and it works, so you don’t have to create a new component for each modal in your app.
React Examples: Mailbox
At Tryolabs, we’ve been exploring using React for some of our products, and as a result have compiled a small repository of example React applications. This post explains the construction of a simple React web application. The app we want to design is basically a React clone of the email client in Ember’s home page. It won’t send email, or communicate with a backend to pull a list of emails, it’s just a bit of static data with some Bootstrap styling.
Django to AngularJS
Being a developer in Tryolabs involves playing with new technologies and pushing them to their limits. Last month I was assigned to work in the development of an interesting vertical search engine that was created by part of our team a while ago. The tool is being used by a couple of our clients to retrieve public data from the internet, but now it was needing some new features and a few adjustments to make it more valuable to its users.