Nael Alismail is the Head of Engineering at ImagineX and shares his insights on the challenges of balancing innovation with constraints, navigating technology choices, and aligning engineering efforts with tangible business outcomes. Nael's pragmatic approach underscores the importance of understanding business goals, making strategic technology decisions, and fostering a culture of iterative development.
This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.
We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.
Lee Dash, SVP of Digital Innovation at Medistrava, sheds light on the pivotal role of user experience (UX) within pharmaceuticals. Lee underscores the importance of effectively delivering scientific content to healthcare professionals and the inherent challenges in innovating UX within an industry steeped in traditional systems. This episode navigates the complexities of adapting user-friendly interfaces to pharmaceutical contexts and the ongoing endeavors to elevate UX. Lee stresses the significance of optimizing the content supply chain and user testing to ensure a seamless user experience. In an arena where scientific information holds paramount importance, presenting it in an easily accessible and comprehensible manner for healthcare professionals is essential. By integrating user feedback and conducting thorough testing, pharmaceutical companies can refine their digital platforms to meet the diverse needs of stakeholders, encompassing medical science liaisons, patients, researchers, and physicians. A notable takeaway from the dialogue is the necessity for customized solutions tailored to the distinct requirements of various stakeholders within the pharmaceutical industry. Each faction possesses unique needs and preferences concerning the access and utilization of scientific content. By comprehending these specific needs, pharmaceutical entities can develop user-friendly interfaces that resonate with the preferences of each stakeholder group. This approach not only enhances user experience but also bolsters the overall efficacy of digital platforms. Lee Dash shares the significance of assembling a versatile development team equipped with multifaceted skills. In an industry characterized by rapid evolution, having a team capable of adapting to shifting technologies and user expectations is imperative. Additionally, Lee talks about the importance of infusing technical acumen into leadership teams. By cultivating leaders well-versed in the technical intricacies of digital innovation, pharmaceutical companies can drive efficient and effective development processes. Download this episode here....
Apr 30, 2024
2 mins
Shawn Wang discusses AI engineering’s potential impact on the software development labor market and developer experience. With the rise of artificial intelligence technologies, there is an increasing demand for professionals who can bridge the gap between AI and software engineering, and engineers are looking around for guidance on how to best learn AI. Shawn emphasizes the importance of acquiring core knowledge and skills in AI engineering, highlighting the need for a systematic approach to education and development. He envisions a future where AI engineering becomes a recognized profession, with specialized training programs and certifications. He further talks about mental models for approaching AI literacy, and skill building. Shawn also discusses the use of advanced AI technology in software development. He showcases tools like GPT Vision, which can automate tasks and generate code efficiently. While acknowledging the potential of AI in enhancing productivity, Shawn emphasizes the need to leverage AI tools to augment human capabilities rather than replace them. Download this episode here....
Apr 17, 2024
1 min
Maximizing Server Rendering for Interactive Next.js Applications Next.js has come a long way since its inception, and it's now a powerful framework that combines both server-side and client-side rendering. With the introduction of React Server Components (RSCs) and the classic client components, you have the flexibility to create a purely client-rendered app with many client components or a purely server-rendered app using RSCs. However, what if you want to have the best of both worlds? Server rendering improves performance and can deliver much of the HTML quickly, reducing the need for the client to render the entire page. This also results in smaller bundles delivered to the client. The question is, how would you maximize server rendering while still having an interactive application? This blog post will show you how. Building a Lightweight Shopping Experience To illustrate the concept, we'll build a lightweight shopping experience with a list of products and an "Add to Cart" button that opens a drawer with the added cart items. Most of the page will be server-rendered, and we'll use client components only to show the drawer. Even the drawer itself will not be entirely a client component; rather, the wrapper necessary to show the drawer will be a client component, while the contents will be server-rendered. This can be accomplished by the nature of client components that can accept server-rendered content. We'll set up a React context provider at the layout level, which will control showing or hiding the cart. This provider will be used by our client components (the "Add to Cart" button and the "Show Cart" button), as well as by the drawer wrapper. When you click "Add to Cart," this will invoke a server action (more on that later), and then use a function provided through the context of the provider to show the drawer. The Code For this example, we'll use shadcn as our component library. It looks nice, and it also provides a good, accessible component for our cart drawer. Looking at our wireframe above, we'll need a total of three components: - Button - Table - Sheet The components can be installed with a single command: ` Next, we'll set up our React context provider: ` ` The provider provides a boolean flag to indicate whether the cart is currently shown (isCartShown) and a function to change that (setCartShown). Note that CartProvider is a client component, but its contents are provided as children. Therefore, CartProvider is just a thin client-component wrapper around its contents. Now, let's see the implementation of the "Add to Cart" button and the CartDrawer component. The AddToCartButton is a client component that reads the React context and calls its setCartShown function after adding to the cart has been completed. This will, in turn, set the isCartShown flag on the provider and show the cart drawer, which also reads the isCartShown flag from the provider. How is the cart updated, though? We'll use a server action named addToCartAction for that. We'll explain how this works in a bit, but in the meantime, let's see the implementations of the AddToCart button and the CartDrawer component. ` Similar to the CartProvider component, the' CartDrawer' component is a thin client component wrapper around its contents. It reads the React context provided by the CartProvider and passes it to the Sheet component from the Shadcn library. The SheetContent component accepts cart contents as children passed from the CartDrawer's parent, which is server-rendered. ` Using Server Actions and Cache Invalidation But how do we ensure that the contents are updated? The contents are an RSC component called CartContents that calls getCachedCart in the data access layer. In real-world scenarios, getCachedCart would probably call a database or an API, but we have neither here. So, we'll simulate a database through the use of the file-system-db package, a lightweight Node library that can write and read to a JSON file as a database. The get calls to the database are wrapped in unstable_cache, which allows us to tag such requests with cart. This means CartContents is initially fetching data from the tagged getCachedCart call. ` Whenever we mutate the cart, we want to call invalidateTags("cart"). This will force purging of Next.js caches and consequently re-render the cart. For example, the "Add to Cart" button calls the addToCartAction server action, which adds the item to the database and calls invalidateTags("cart"). This server action call returns an updated RSC payload to the client, which re-renders the part that depended on the getCachedCart call - and that is the CartContents component. ` ` And that's it. We now have a fully functional, mostly server-rendered cart, where only small bits of interactivity are modeled as client components. Here is the result: Some of the code shown above remains, such as the "Show Cart" button and the table of products, but those are just UX improvements on top of the core functionality. You can see the entire source code on Stackblitz. Wrapping Up In this blog post, we've explored how to maximize server rendering in Next.js while still having an interactive application. By leveraging React Server Components, client components, and server actions, we've created a shopping experience where most of the page is server-rendered, but the cart drawer is interactive and updates in real time. This approach improves performance, reduces the client-side rendering burden, and delivers smaller bundles to the client....
May 15, 2024
5 mins
Revathi Pillai, the Chief Engineering Officer of Mutualink, emphasized the significance of clear communication, collaboration, and transparency in software engineering leadership, and shared her journey from engineer to manager and shed light on the importance of self-advocacy for women in the workplace. Along with Tracy Lee, Revathi discussed the delicate balance between developing new features and maintaining existing products. By managing cost reduction projects and considering technical debt, engineering leaders can ensure that their products remain robust and efficient in the long run. Revathi also emphasized the role of efficient processes and hiring individuals with the right mindset in driving cultural change within an organization. By implementing streamlined workflows and fostering a collaborative environment, engineering teams can minimize chaos and create a smoother work experience. Lastly, they talked about the benefits of leveraging artificial intelligence in operations. By harnessing the power of AI, engineering teams can automate repetitive tasks, optimize workflows, and improve overall efficiency. Revathi’s perspective underscores the potential of AI in transforming the way engineering teams operate, enabling them to focus on more strategic and impactful work. Download this episode here....
May 14, 2024
1 min