# Redux Redux is a JavaScript library for predictable and maintainable global state management in applications. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Let's Reduce! A Gentle Introduction to Javascript's Reduce Method DevFeed: [Let's Reduce! A Gentle Introduction to Javascript's Reduce Method]() Original publisher: [Read original article]() Author: Khan Academy Published: 2017-07-10T22:00:00Z Content type: tutorial Language: en Sources: [Khan Academy]() Topics: [JavaScript](), [coding](), [Redux](), [Web Development]() Tags: [array](), [arrow](), [engineering](), [filter](), [introduction](), [javascript](), [map](), [news](), [react](), [reduce](), [web-frontend]() ### AI overview A tutorial explaining JavaScript's reduce method as a foundation for understanding Redux. It describes how reduce processes array items, how each iteration depends on the previous return value, and why the method can be difficult to learn. ### Source excerpt By Josh Comeau Every summer, Khan Academy recruits a few software engineer interns. As part of their onboarding, ... Read more ## Figma's 100x Approach to Scaling Its Collaborative Experience DevFeed: [Figma's 100x Approach to Scaling Its Collaborative Experience]() Original publisher: [Read original article]() Author: Richard Oliver Bray Published: 2024-09-11T13:03:05Z Content type: article Language: en Sources: [Hacking Scale by Better Stack]() Topics: [Figma](), [Scalability](), [Databases](), [GraphQL](), [React](), [Ruby](), [WebSocket](), [Redux](), [.NET 11 Preview 7]() Tags: [database](), [figma](), [graphql](), [react](), [real-time](), [redux](), [ruby](), [scalability](), [sharding](), [web]() ### AI overview The article explains how Figma scaled real-time collaboration by developing LiveGraph, an in-house system inspired by GraphQL that acts as a shared data store or cache and manages database queries, updates, and client subscriptions. It also describes the scaling pressures that led to the LiveGraph 100x project. ### Source excerpt How Figma destroyed their old setup and used the pieces to build a better one ## Year in Review: 2023 DevFeed: [Year in Review: 2023]() Original publisher: [Read original article]() Author: hello@taniarascia.com Published: 2024-01-20T00:00:00Z Content type: opinion Language: en Sources: [Tania Rascia]() Topics: [coding](), [Web](), [React](), [Redux](), [GraphQL]() Tags: [burnout](), [career](), [coding](), [graphql](), [life](), [review](), [websockets](), [year-in-review]() ### AI overview A personal review of 2023 and the author's ten years as a developer, covering career history, burnout from writing for DigitalOcean, recent software-related posts, and plans to write more about personal interests. ### Source excerpt It's 2024, y'all. We're 20 days into the year, so I'm running out of time to write that end of year post I always do. I haven't quite known... ## Simplifying Redux in Kotlin: "mutating" immutable states with Mutekt DevFeed: [Simplifying Redux in Kotlin: "mutating" immutable states with Mutekt]() Original publisher: [Read original article]() Author: Shreyas Patil Published: 2023-03-24T13:00:39Z Content type: tutorial Language: en Sources: [Shreyas Patil's Blog]() Topics: [Kotlin](), [Redux](), [Development](), [Front end](), [multiplatform]() Tags: [android](), [developers](), [javascript](), [kotlin](), [kotlin-multiplatform](), [multiplatform](), [redux](), [state-management](), [ui]() ### AI overview This tutorial introduces Mutekt, a multiplatform Kotlin utility for simplifying immutable state updates with mutating syntax in Redux-like architectures. It begins by explaining common approaches to managing and updating Kotlin state models, including copying previous state and combining multiple states. ### Source excerpt Simplify state management in Kotlin with Mutekt. Learn how to write 'mutating' syntax for immutable states in Redux-like architectures. ## How to Use WebSockets in a Redux Application DevFeed: [How to Use WebSockets in a Redux Application]() Original publisher: [Read original article]() Author: hello@taniarascia.com Published: 2023-02-15T00:00:00Z Content type: tutorial Language: en Sources: [Tania Rascia]() Topics: [WebSocket](), [Redux](), [middleware](), [React](), [browser](), [API]() Tags: [api](), [chat](), [dashboard](), [how-to](), [javascript](), [react](), [redux](), [websockets]() ### AI overview A tutorial on integrating WebSockets into a React/Redux application by using Redux middleware to manage connection events, state access, and dispatched actions. It demonstrates a browser WebSocket client and discusses initializing and closing connections for use cases such as chat and live dashboards. ### Source excerpt At some point, you might work on a React/Redux application that requires the use of WebSockets, such as for chat or live updates on a... ## Reclaim the reactivity of your state management, say no to imperative MVI DevFeed: [Reclaim the reactivity of your state management, say no to imperative MVI]() Original publisher: [Read original article]() Author: Gabor Varadi Published: 2022-05-02T05:05:46Z Content type: opinion Language: en Sources: [Stories by Gabor Varadi on Medium]() Topics: [reactive](), [Redux](), [Elm](), [JavaScript](), [Programming]() Tags: [android](), [android-app-development](), [androiddev](), [architecture](), [architecture-pattern](), [clean-code](), [elm](), [javascript](), [model-view-intent](), [mvi](), [reactive](), [redux](), [state](), [state-management]() ### AI overview The article critiques imperative MVI-style state management as overly complex and boilerplate-heavy. It traces MVI's web-oriented history through Cycle.js, The Elm Architecture, and Redux, and questions whether those patterns fit statically typed application development. ### Source excerpt Do you find yourself chasing for "clean code, clean architecture, clean design, clean state management" yet still feel bogged down in a sea of boilerplate for even the simplest of tasks -- such as showing a simple list fetched with a coroutine? Surely this could be done in a single line or maybe about seven, but it certainly shouldn't need gigantic case-whens, three layers of indirection, and so on? Well, normally you could just invoke functions on ViewModel and it would work, but if you're forced to seek the "architectural holy grail", no one around you will trust your code unless you add at least one sealed class called ViewActions, and increase the cyclomatic complexity of your "action handler" function until it feels "just clean enough". (After all, surely the more completely unrelated things a single function does based on its argument, the more it has a "single responsibility" of handling literally everything, which is why you know it's definitely the best possible way to do it. 😏) Anyway, the boilerplate of coupling together all aspects into a single class, whether it is a function call or state property, this all has a history: namely, it came from the web. The brief history of MVI MVI stands for "model-view-intent" and comes from a (not very popular for use in production) Javascript framework called Cycle.js, hand-in-hand with a (not popular anymore) concept called "The Elm Architecture" defined as the best practices and intended use of an experimental (and since 2019, unmaintained) "functional-reactive programming language for the web" called ELM. Then again, these didn't come from a vacuum either -- the originator is Redux, in 2015. The general idea was to implement a state machine using the command processor pattern in Javascript, thereby supporting "undo" functionality (also often referred to as "time-travel debugging"). Of course, most design decisions of Redux only make sense for Javascript -- as it is a language with no static typing. It makes sense to ## GraphQL, meet LiveGraph: a real-time data system at scale DevFeed: [GraphQL, meet LiveGraph: a real-time data system at scale]() Original publisher: [Read original article]() Author: Rudi Chen; Slava Kim Published: 2021-10-14T00:00:00Z Content type: article Language: en Sources: [Figma Blog]() Topics: [GraphQL](), [real-time](), [Front end](), [Figma](), [React](), [Replication](), [Redux](), [Databases](), [web applications]() Tags: [complexity](), [database](), [features](), [figma](), [frontend](), [graphql](), [react](), [real-time](), [redux](), [replication]() ### AI overview Figma describes LiveGraph, a real-time data-fetching layer built on Postgres. It lets frontend code express live data subscriptions with GraphQL, queries the database directly, and delivers millisecond-scale updates by reading the database replication stream. The system addresses growing complexity in incremental loading, client state, and manually managed event-based updates. ### Source excerpt Software Engineers Rudi Chen and Slava Kim shares an inside look at how we empower engineers to build real-time data views, while abstracting the complexity of pushing data back and forth. ## How to Structure and Organize a React Application DevFeed: [How to Structure and Organize a React Application]() Original publisher: [Read original article]() Author: hello@taniarascia.com Published: 2021-06-23T00:00:00Z Content type: tutorial Language: en Sources: [Tania Rascia]() Topics: [React](), [structure](), [React Hooks](), [Redux](), [React Router](), [styled-components](), [Jest](), [testing-library](), [Authentication]() Tags: [authentication](), [css](), [how-to](), [javascript](), [jest](), [react](), [react-hooks](), [react-router](), [redux](), [state-management](), [structure]() ### AI overview This tutorial presents an opinionated, feature-focused directory structure for organizing large-scale production React applications. It explains how to separate global shared components from feature-specific code and discusses accompanying choices for Redux, React Router, styling, testing, and authentication. ### Source excerpt There is no consensus on the right way to organize a React application. React gives you a lot of freedom, but with that freedom comes the... ## Redux to Apollo: Data Access Patterns DevFeed: [Redux to Apollo: Data Access Patterns]() Original publisher: [Read original article]() Author: Dan Reynolds Published: 2021-01-29T11:30:04Z Content type: tutorial Language: en Sources: [Apollo Blog]() Topics: [apollo-client](), [Redux](), [GraphQL](), [selectors](), [migration](), [React]() Tags: [apollo-client](), [graphql](), [migration](), [redux](), [selectors](), [state-management]() ### AI overview This article describes NerdWallet's migration from a React-Redux codebase to Apollo for client-side state management. It focuses on implementing data access, filtering, transformation, side-effect handling, and Redux-selector-like patterns with GraphQL and Apollo Client. ### Source excerpt As part of NerdWallet's migration from our React-Redux code base to client state management using Apollo, we've been exploring how to effectively implement data access patterns, side-effects handling, and other aspects of client state management using GraphQL and Apollo Client. This first post examines how we accomplish effective data access, filtering and transformation on the client like we currently do using Redux selectors. ## Apollo Client & Client-side Architecture Basics DevFeed: [Apollo Client & Client-side Architecture Basics]() Original publisher: [Read original article]() Author: Khalil Stemmler Published: 2020-07-17T10:56:10Z Content type: article Language: en Sources: [Apollo Blog]() Topics: [apollo-client](), [React](), [Developer experience](), [Redux](), [Angular](), [context]() Tags: [angular](), [apollo-client](), [architecture](), [context](), [developer-experience](), [hooks](), [react](), [redux]() ### AI overview This article introduces client-side architecture basics for React applications. It discusses architectural principles, developer experience, different kinds of application state, concerns such as authentication and networking, and the role Apollo Client can play. ### Source excerpt Architecture is the foundation, the skeleton, that sets your project up for success. It's the stuff that we wish we got right from the start because making drastic architectural changes, later on, can be challenging and time-consuming. Today, we React developers have tools like Context, Hooks, Redux, and xState. ## How I built my first search component in React DevFeed: [How I built my first search component in React]() Original publisher: [Read original article]() Published: 2020-07-17T00:00:00Z Content type: tutorial Language: en Sources: [HackerEarth]() Topics: [React](), [Redux](), [Development](), [Document Object Model (DOM)]() Tags: [architecture](), [caching](), [code](), [components](), [modal](), [module](), [react](), [redux](), [render](), [search](), [server]() ### AI overview A developer explains how they built a React search component for a donation platform. The component displays search results in a modal, uses Redux actions, reducers, and a store to manage state, and relies on a service layer for server requests, caching, and error handling. ### Source excerpt In 2016, I was working to build a platform to help NGOs raise donations. The platform was supposed to be built using React. The beautiful designs were in place. I was excited to build some new features as well as to try out the new architecture using Redux on a larger scale. Yes, this was the time when Redux was fairly new. React still had PropTypes package attached to its core. The lifecycle method componentWillReceiveProps used to dominate the scene. Out of the many design components that I worked while building that platform, I am going to discuss my first search component in React here. Elements of a search bar The search bar was a simple input field placed at the middle of the main header. The design idea was to have a search component which displays results as soon as the user inputs something in it. Then, to provide a simple cross icon at the right end of the input field to clear the inputs and hide the search results. The search results were supposed to appear inside a modal starting below the main header of the site. Below are the designs to help you visualise things better: If you typed on the search bar, a search results component appeared and showed NGOs, Live Projects and Campaigns. Development Redux Architecture While building apps using Redux architecture, one should be cognizant of its three principles (Single source of truth, State is read-only and Changes are made with pure functions). In computer programming, a pure function is a function that has the following properties: Its return value is the same for the same arguments Its evaluation has no side effects In our case, a single module (file) was created to include action types, reducers and action creators. The flow was - when the user inputs something in the search field, we will take that value and pass it through an action creator which will fetch the results from the server for the queried string and return an action type along with the result. There was also a service layer in the middle, w ## Developer Spotlight: Postmates DevFeed: [Developer Spotlight: Postmates]() Original publisher: [Read original article]() Author: Richard Moot Published: 2019-08-14T10:00:00Z Content type: article Language: en Sources: [Square Corner Blog RSS Feed]() Topics: [API](), [Binance](), [Back end](), [Front end](), [React](), [Elixir](), [Erlang](), [Go](), [Python](), [Redux](), [Scala](), [TypeScript]() Tags: [api](), [apis](), [backend](), [developer](), [developer-velocity](), [elixir](), [erlang](), [frameworks](), [frontend](), [go](), [integration](), [java](), [kotlin](), [python](), [react](), [redux](), [scala](), [slack](), [spotlight](), [swift](), [typescript]() ### AI overview Square's developer spotlight features Postmates and discusses its integration with the Square Orders API, along with Postmates' engineering organization, development practices, and technology stack. ### Source excerpt Postmates talks with us about their integration of Orders API ## MVI - The Good, the Bad, and the Ugly DevFeed: [MVI - The Good, the Bad, and the Ugly]() Original publisher: [Read original article]() Published: 2019-07-24T18:52:57Z Content type: opinion Language: en Sources: [Posts on Adam Bennett]() Topics: [Redux](), [Android](), [Development](), [reactive]() Tags: [algorithms](), [android](), [android-development](), [architecture](), [article](), [blog](), [career](), [compose](), [development](), [engineering](), [finance](), [flow](), [functional](), [growth](), [java](), [jetpack](), [kotlin](), [money](), [mvi](), [opinion](), [opinions](), [patterns](), [reactive](), [reactive-programming](), [software](), [startups](), [testing](), [thoughts](), [training](), [tutorial](), [ui]() ### AI overview An opinionated introduction to MVI, also known as Redux, for Android development. The article explains its unidirectional data flow, event and result modeling, reducers, sealed classes, and integration with functional reactive programming, while considering its benefits and downsides. ### Source excerpt For those keeping track of the latest trends in view architecture patterns, MVI, aka Redux, has seemingly become the latest and greatest for Android Development. There's tonnes of things to love about MVI - but what are the downsides, and what should you know going into it? For the sake of this article, I'm basing my thoughts on an adaptation of MVI which I've used for a while now for both personal projects and at work. You can find the important classes here for a deeper dive, but I'll run through the basics here too. ## GSoC 2019 - Developer Web Interface for ReactOS (Community Bonding and week 1,2) DevFeed: [GSoC 2019 - Developer Web Interface for ReactOS (Community Bonding and week 1,2)]() Original publisher: [Read original article]() Published: 2019-06-07T00:00:00Z Content type: article Language: en Sources: [Front Page on ReactOS Website]() Topics: [ReactOS](), [React](), [Redux](), [JavaScript](), [GitHub API](), [Heroku](), [Pull Request]() Tags: [api](), [free](), [heroku](), [javascript](), [open-source](), [os](), [react](), [reactos](), [redux](), [win32](), [winapi]() ### AI overview A GSoC 2019 student describes developing a React and Redux web interface for ReactOS. During the community bonding period and first two weeks, the project included learning the frontend technologies, connecting to GitHub API endpoints, rendering commits, pull requests, and branches, and deploying the application on Heroku. ### Source excerpt Introduction Hey Everyone, I'm Ayush Kumar Sinha, A 2nd Year CS undergraduate from VIT Vellore, India and a GSoC student this year under ReactOS : ) How I got to know about the project While scrolling through the list of accepted Orgs of 2018 (with filters like web, C++, javascript)I bumped into ReactOS. Hey!! they are building Windows-like OS from scratch, Sounds cool :). But the project ideas look quite hard with my existing C/C++ skills. ## React State: Choose Wisely DevFeed: [React State: Choose Wisely]() Original publisher: [Read original article]() Author: jsmapr1@gmail.com (Joe Morgan) Published: 2019-03-19T13:22:59Z Content type: tutorial Language: en Sources: [Pony Foo]() Topics: [React](), [Redux](), [context](), [Code]() Tags: [component](), [javascript](), [react](), [redux](), [state](), [state-management]() ### AI overview This tutorial compares three approaches to managing state in React: local component state, global state using Redux, and Context. It evaluates them by implementation speed, data encapsulation, and accessibility from other components. ### Source excerpt Proper state handling in React will make your components simple and maintainable. Poor choices will give you lots of headaches in the long-term. There are plenty of options for managing state in a React app. But there's very little guidance about which one you should use in any situation. Let's fix that. The solution you pick to manage state should fit they way you want to use the items you hold in state. Your choice should also make it easy for you to update, reuse, and refactor your code. In other words, your choice of state management can make your life easy or hard. Here's a non-exhaustive list of things you should consider: How quickly can you add new state code? How well encapsulated is your stateful data? How easy is it to pull the data into a new component? Let's use this list as a basis for comparing different ways of handling state. To do this, we'll make the same simple component using three different forms of state handling. By making the same thing three ways, you'll get a few nice perspectives. First, you'll see that any approach can solve any problem. This is important because if you know that you can solve nearly any problem with any form of state management, you can turn your attention from the technical problem of getting it working, to the more abstract problem of making it work well in your over all application. Second, by making the same thing three ways, you'll start to see the subtle differences which can become big headaches as an applications grows. What are the three ways to manage state? Local State: State stored directly on the component. Global State: A global store. In this example, you'll use redux. Context: A newer API that lets you access state higher up the tree. Using the three points of comparison and the three ways of managing state, you'll be able to build a nice table that will let you compare the different options. Local Global Context Easy ? ? ? Encapsulated ? ? ? Available ? ? ? Alright. Let's get started. You'll be making a ## Garbage Collection in Redux Applications DevFeed: [Garbage Collection in Redux Applications]() Original publisher: [Read original article]() Published: 2019-01-24T00:00:00Z Content type: tutorial Language: en Sources: [SoundCloud Backstage Blog]() Topics: [Redux](), [Xbox](), [Memory Leaks](), [React](), [Universal Windows Platform](), [C++]() Tags: [c-plus-plus](), [engineering](), [javascript](), [memory-leak](), [react](), [redux](), [xbox]() ### AI overview SoundCloud describes memory growth in its Xbox React Redux application, which runs in a UWP web-view wrapper with a native C++ playback layer. Testing found that the Redux store kept growing during sessions lasting more than an hour under Xbox background-memory constraints. ### Source excerpt The SoundCloud Xbox application is a regular React Redux application that runs in a native web view wrapper on Microsoft's UWP framework. In... ## Simple State Management with RxJS's scan operator DevFeed: [Simple State Management with RxJS's scan operator]() Original publisher: [Read original article]() Published: 2018-10-09T00:00:00Z Content type: tutorial Language: en Sources: [Juri Strumpflohner]() Topics: [frontend development](), [Redux](), [Development]() Tags: [angular](), [frontend-development](), [how-to](), [redux](), [rxjs](), [state-management]() ### AI overview A tutorial on using RxJS's scan operator to build a simple state-management solution for frontend applications. It contrasts this lightweight approach with more structured patterns and libraries such as Flux and Redux, while noting that the example is intentionally naive and should be adapted to specific needs. ### Source excerpt Lorem ipsum dolor sit amet ## Achieving Major Stability and Performance Improvements in Yahoo Mail with a Novel Redux Architecture DevFeed: [Achieving Major Stability and Performance Improvements in Yahoo Mail with a Novel Redux Architecture]() Original publisher: [Read original article]() Author: mikesefanov Published: 2018-04-18T14:04:59Z Content type: article Language: en Sources: [Yahoo]() Topics: [Redux](), [React](), [API](), [JavaScript]() Tags: [api](), [developers](), [engineering](), [improvements](), [javascript](), [open-source](), [performance](), [react](), [redux](), [yahoo-engineering](), [yahoo-mail]() ### AI overview Yahoo Mail describes changes to its Redux architecture that improved stability, page-load performance, frame-rendering time, and API-call efficiency. The article explains how action syncers separate API interactions from action creators and components, enabling techniques such as batching and deduplication. ### Source excerpt yahoodevelopers: By Mohit Goenka, Gnanavel Shanmugam, and Lance Welsh At Yahoo Mail, we're constantly striving to upgrade our product experience. We do this not only by adding new features based on our members' feedback, but also by providing the best technical solutions to power the most engaging experiences. As such, we've recently introduced a number of novel and unique revisions to the way in which we use Redux that have resulted in significant stability and performance improvements. Developers may find our methods useful in achieving similar results in their apps. Improvements to product metrics Last year Yahoo Mail implemented a brand new architecture using Redux. Since then, we have transformed the overall architecture to reduce latencies in various operations, reduce JavaScript exceptions, and better synchronized states. As a result, the product is much faster and more stable. Stability improvements: when checking for new emails - 20% when reading emails - 30% when sending emails - 20% Performance improvements: 10% improvement in page load performance 40% improvement in frame rendering time We have also reduced API calls by approximately 20%. How we use Redux in Yahoo Mail Redux architecture is reliant on one large store that represents the application state. In a Redux cycle, action creators dispatch actions to change the state of the store. React Components then respond to those state changes. We've made some modifications on top of this architecture that are atypical in the React-Redux community. For instance, when fetching data over the network, the traditional methodology is to use Thunk middleware. Yahoo Mail fetches data over the network from our API. Thunks would create an unnecessary and undesirable dependency between the action creators and our API. If and when the API changes, the action creators must then also change. To keep these concerns separate we dispatch the action payload from the action creator to store them in the Redux state for later ## How to create a Data Container Component in React DevFeed: [How to create a Data Container Component in React]() Original publisher: [Read original article]() Author: Federico Published: 2018-03-24T14:31:38Z Content type: tutorial Language: en Sources: [Federico Cargnelutti]() Topics: [React](), [ui](), [Redux]() Tags: [component](), [design-patterns](), [frameworks](), [how-to](), [javascript](), [node-js](), [react](), [redux](), [ui](), [ui-components]() ### AI overview A tutorial on the Data Container pattern in React. It explains how to separate data access and behavior from presentational components, compares inheritance with composition, and mentions Redux and other data-store options. ### Source excerpt One pattern I've used quite a lot while working with React at the BBC and Discovery Channel is the Data Container pattern. It became popular in the last couple of years thanks to libraries like Redux and Komposer. The idea is simple. When you build UI components in React you feed data into them via [...] ## Marvin v1.0 DevFeed: [Marvin v1.0]() Original publisher: [Read original article]() Author: Stanko Published: 2018-01-05T00:00:00Z Content type: release Language: en Sources: [Stanko Tadić]() Topics: [Boilerplate](), [React](), [Redux](), [PostCSS](), [async](), [data]() Tags: [async](), [boilerplate](), [postcss](), [react](), [redux](), [v1]() ### AI overview Marvin 1.0 is a universal React boilerplate release. The update replaces redux-thunk with redux-saga, adds server-side asynchronous data fetching with results stored in Redux for client reuse, and replaces Sass with PostCSS. The author describes the setup as opinionated and intended as a modifiable starting point. ### Source excerpt Marvin just got better! Few days ago I've released version 1.0 of my universal React boilerplate.Also known as Marvin There are some big changes, and I'm pretty happy with it's current state. At least 20 applications were shipped using Marvin. It has about seven hundred stars on GitHub with quite a few community contributions. Big updates # Switch from redux-thunk to redux-saga. Sagas are bit more complicated but they make managing asynchronous actions easier. They are really powerful and something I usually go for. Thunks are good for smaller apps, but they tend to get messy as application grows. Straight from redux-saga docs: Contrary to redux thunk, you don't end up in callback hell, you can test your asynchronous flows easily and your actions stay pure. Universal async data fetching using sagas. This was one of the most requested features. Marvin now supports getting the async data on the server. Data is then saved to the redux store for client to reuse. Example is included, but I plan to write more detailed documentation on it. Switch from SASS to postcss. It is time to move on. SASS is awesome, but PostCSS caught up, and it is future proof. Plus, if you are using Autoprefixer you are already using it anyway. I could write whole article about it, but people already did it and you can read them here. It is opinionated # These changes and overall setup are very opinionated and crafted by our experience and needs. It is made to be starting point for us, and it might not be the best choice for you. Although, I personally think it is pretty easy to modify it to fit custom needs. If you use Marvin please leave a comment here or on the repo. Thanks! ## 2017: another year in review DevFeed: [2017: another year in review]() Original publisher: [Read original article]() Author: Monica Dinculescu Published: 2018-01-02T00:00:00Z Content type: opinion Language: en Sources: [Monica Dinculescu]() Topics: [Post Mortem](), [Redux](), [GitHub]() Tags: [2017](), [post-mortem](), [redux](), [year-in-review]() ### AI overview A personal review of 2017 that reassesses the author's year through projects, contributions, talks, conferences, side projects, time off, and involvement with the Unicode Emoji committee. The author concludes that fewer contributions or talks did not mean the year was unsuccessful. ### Source excerpt You can tell I hate writing year in reviews because this one is really, really late. I tend to hate bragging, and I definitely hate introspective and, in particular, I always think I am underperforming (and that's fine). However, that's usually not true, and writing a year in review forces me to see the awesome things I did, so even if I did end up underperforming, at least I can learn from that. That's the whole point of post-mortems, right? As usual, here's life as GitHub saw it. Red text is projects I've shipped, black text is conferences I've spoken at. Technically I didn't speak at Blinkon, but I spoke to people at it so hey, counting it. The reason why this post mortem is important to me is that before writing it, I literally thought this year was bad and I just "did fewer things". But that's not actually true! I wrote less code than in 2016 (2713 vs 3153 contributions), but that's totally irrelevant? GitHub contributions are a fake idea, and I'm the first one to tell you this, so I don't know why I get worked up about them every year. I contributed to weird branches (which don't get counted), and did a lot of weird explorations that obviously never got merged. I planned things. I wrote design documents. I reviewed design documents. I formed strong opinions. I learnt Redux. Eat it, contributions graph. I gave fewer talks than in 2016 (7 vs 8), but I enjoyed conferences more. I went to a conference where I only hung out with badass women. I went to Railscamp, where I had no wifi and canoed and wore a headlamp like a giant dork. I MC-ed Chrome Dev Summit with Mariko, which was scary, and intimidating and incredibly fun. I built more side projects (10 vs 9). One of them got featured in The Verge! I worked fewer weekends (16 vs 28 days. Goal: 0). And I don't mean on work-work, I mean, at all. On the weekends I play Stardew Valley, or make pottery, or knit, or watch an entire season of Riverdale because I can. Maybe this means I'll work on fewer side-things, and ma ## trivago rebuilds hotel filters for accessibility and performance DevFeed: [trivago rebuilds hotel filters for accessibility and performance]() Original publisher: [Read original article]() Author: Tom Dwyer Published: 2017-12-22T00:00:00Z Content type: article Language: en Sources: [Trivago]() Topics: [Accessibility](), [JavaScript](), [legacy](), [maintenance](), [Redux](), [Mobile]() Tags: [accessibility](), [frontend](), [javascript](), [legacy](), [maintenance](), [mobile](), [redux](), [user-experience]() ### AI overview trivago describes rebuilding its hotel filter sidebar to replace legacy Harmony code with Melody JS and Redux. The rewrite aimed to improve keyboard accessibility, reduce maintenance overhead, and address rendering performance on mobile devices. ### Source excerpt Filtering is an important way to find what you're really looking for, so why should we be okay with some users not being able to access them? We're not, so we did something about it. ## The future of state management DevFeed: [The future of state management]() Original publisher: [Read original article]() Author: Peggy Rayzis Published: 2017-12-21T22:36:00Z Content type: article Language: en Sources: [Apollo Blog]() Topics: [apollo-client](), [GraphQL](), [Redux]() Tags: [announcement](), [apollo-client](), [data](), [graphql](), [redux](), [state](), [state-management](), [ui]() ### AI overview The article discusses managing both remote and local application state with Apollo Client. It describes the limitations of maintaining separate Redux or MobX stores and presents GraphQL queries and mutations as a way to represent application state and combine data from local and remote sources. ### Source excerpt When an application grows in size, its state often grows in complexity. As developers, we're not only tasked with juggling data from multiple remote servers, but also with handling local data resulting from UI interactions. To top it off, we have to store all of this data in a way that's easily accessible from any component in our application. Thousands of developers have told us that Apollo Client excels at managing remote data, which equates to roughly 80% of their data needs. ## AWS AppSync, built with Apollo DevFeed: [AWS AppSync, built with Apollo]() Original publisher: [Read original article]() Author: Peggy Rayzis Published: 2017-11-29T23:06:11Z Content type: article Language: en Sources: [Apollo Blog]() Topics: [apollo-client](), [Amazon Web Services](), [GraphQL](), [DynamoDB](), [elasticsearch](), [Redux]() Tags: [api](), [apollo](), [authentication](), [aws](), [community](), [dynamodb](), [elasticsearch](), [graphql](), [offline](), [real-time](), [redux]() ### AI overview The article explains how AWS AppSync, a GraphQL service with real-time updates and offline support, uses Apollo technology. It describes AppSync's use of Apollo Client 2.0, Apollo iOS, Apollo Codegen, Apollo Link, and Redux-based persistence. ### Source excerpt Yesterday at reInvent, Amazon launched AppSync, a new GraphQL service featuring real-time updates and built-in offline support. Managed in the AWS console, AppSync's GraphQL layer aggregates data from other AWS products such as ElasticSearch and DynamoDB. In your application, you query your GraphQL API with the AppSync Client, available for web and native. The AppSync announcement got a lot of love from the developer community, and it's easy to see why people are excited about GraphQL! [Next page]()