Money Forward, Inc.’s Post

Hello 🌍, I just published the first version of new atomic React state management library called Charm. - strong focus on separation of concepts - ⚛ atomic means your build store from - 🪄 encourages developers to create UI commands as plain functions - enables use of set/update operations without use-hooks - crafted with design patterns and code base size scalability in mind - inspired by jotai, recoil, zustand - works in parallel environments, such as SSR, NextJs, Astor, Remix etc. - uses AsyncLocalStorage, not ReactContext under the hood. - 😸 Charm as is in the name of sub-atomic particle Here is code example ``` // counter.ts const counterCharm = charm(0); export const useCounter = useCharm(counterCharm); export const inc = counterCharm.update(prev => prev + 1); // Counter.tsx const Counter = () => { const counter = useCounter(); return <button onclick={inc}> clicked {counter} times </button> } ``` https://lnkd.in/dca6r9RB

I've recently tried something new at work: Writing an article! 😁 I've always been more a "lurker" on sites like Medium or StackOverflow but today, I can finally join the group of actual authors! I decided to write an article about the implementation of the MVI architecture in an Android project. The reason being, I work on a large number of different projects and each has its own subtlety in terms of architecture for no real reason most of the time (other than different people started each project). This makes onboarding new developers, inters and finding information on those projects really time-consuming when it doesn't need to be. Hence, building upon the core concepts of MVI an adapting it to our needs, was a great way to improve my skills and also allow our projects to benefit from a common architecture that allows all developers to contribute easily to all projects! Feel free to check this article out (and many more are on the way!) Thanks to ProAndroidDev for the publication!

Ever wondered how experienced developers craft elegant and maintainable code? Today, we'll unlock the secrets of design patterns! This post introduces the fundamentals and different categories of these powerful tools. https://lnkd.in/g_pCQS6E

Understanding State Management using Atomic State management Libraries in React Microfrontends 1. Microfrontend Architecture: Splits a large frontend application into smaller, independent units each focused on specific business features. This architecture enhances scalability, speeds development, and isolates failures. 2. Role of Zustand and Jotai 3. State Management Integration 4. Persistence of State 5. Implementation Strategies 6. Hydration and State Sync 7. Best Practices 8. Benefits Checkout my Medium post for a deeper insight:

📕 Conquering Complexity: Building a Scalable Single File Component (SFC) Architecture in Vue.js 👉🏻This blog post delves into the art of crafting a scalable SFC architecture, empowering you to tackle large-scale Vue projects with confidence. https://lnkd.in/e8xNpjmx

In the heart of every enduring codebase at a massive, high-throughput internet company—serving millions of requests every second—you’ll find something striking: simplicity. The code that has stood the test of time is incredibly clean, almost obvious in its design. You look at it and think, “I could have written this in a day.” What’s invisible, however, is the journey behind it. This code has likely been rewritten, iterated upon, and refined hundreds of times. It has shed all unnecessary complexity, leaving only the essential, honed functionality. This simplicity isn’t accidental; it’s deliberate. Every line of code you write, you should feel a weight building in your shoulders. There’s this pressure to write as little code as possible, or better yet, no code at all. Every line written is a cost—an ongoing burden the company must carry. And yet, nothing happens without some code. It’s in this tension—between doing nothing and doing just enough—that the diamonds are forged.

🎉 PROJECT OVERVIEW: I developed a simple blog display application using React.js. This project helped me deepen my understanding of component-based architecture, state management, and dynamic rendering of blog content fetched from an API. 🔑 KEY FEATURES: Component-Based Structure: The application is structured with reusable components for displaying blog lists and individual blog details. State Management: Managed blog data and dynamic page updates using React’s useState and useEffect hooks. API Integration: Integrated with a blog API (or local JSON) to display dynamic content in real-time. Routing: Implemented react-router-dom for smooth navigation between the blog listing and detailed view. https://lnkd.in/dCa3YvjZ

Excited to dive into the first part of our new blog series: "Backend Architecture on Frontend" by Łukasz! Discover: 🤖 how frameworks like Next.js and Remix are bridging the gap between frontend and backend development, 🤖 why architectural discipline is crucial, 🤖 and how adopting principles like GRASP can bring order to your codebase. Perfect for developers looking to streamline complex interfaces with simple APIs. Stay tuned for practical tips on creating a robust architecture that meets your actual needs. Check on your own: https://lnkd.in/d5c2_Sj5

🏗 Wondering how to build 𝗮𝗽𝗽 𝗮𝗿𝗰𝗵𝗶𝘁𝗲𝗰𝘁𝘂𝗿𝗲 𝘁𝗵𝗮𝘁 𝘀𝘁𝗮𝘆𝘀 𝗿𝗲𝗹𝗶𝗮𝗯𝗹𝗲 during development and 𝗲𝗮𝘀𝗶𝗹𝘆 𝘀𝗰𝗮𝗹𝗲𝘀 as your project grows? Join our key contributor and blogger Mateusz Stefańczyk at his free webinar "𝗛𝗼𝘄 𝘁𝗼 𝗕𝘂𝗶𝗹𝗱 𝗦𝗰𝗮𝗹𝗮𝗯𝗹𝗲 𝗔𝗻𝗴𝘂𝗹𝗮𝗿 𝗔𝗿𝗰𝗵𝗶𝘁𝗲𝗰𝘁𝘂𝗿𝗲 𝗶𝗻 𝟮𝟬𝟮𝟱." 📅 When? November 21 at 2 PM CET 📍 Where? Online Learn about: 👉 Key principles for building scalable architecture. 👉 The roles of "Components" and "State management" and how they shape robust Angular architecture. 👉 When and why should Micro Frontends be considered in your app's structure? 👉 Real-world examples of scalable Angular architectures. 🎓 Take advantage of the Q&A session to get personal help with your questions. Register for free -> https://lnkd.in/dNEMy8hp

The dust from the React Native 0.76 release has barely settled, and we’re already back with part two of our deep dive into the trickiest parts of the New Architecture. 🧹✨ If you want to continue your learning from part one, check the article by our Jakub Piasecki for more tips on using custom state with shadow nodes and modifying views with commit hooks. 🪝👇 https://lnkd.in/dYuR3m8M