Forem: Lakin Mohapatra

The Curse of Von Neumann Architecture

Lakin Mohapatra — Tue, 30 Jul 2024 07:43:56 +0000

Ever wondered why cybersecurity is such a critical concern? It all traces back to the foundational design of our computers. Discover how the lack of distinction between data and code storage in Von Neumann architecture can lead to significant security vulnerabilities.

In this blog post, I discussed the curse of Von Neumann Architecture and explored a real-world example involving CrowdStrike. Check it out.

Click here to read full article

When to Approach CTO and Product Manager

Lakin Mohapatra — Fri, 15 Mar 2024 08:50:55 +0000

As a software developer working in a team, it's essential to know when to approach the Chief Technology Officer (CTO) and the Product Manager for guidance and collaboration. This post will help you understand the scenarios for each role:

Approach CTO when:

Making major technology choices or system design decisions.
Planning long-term technical strategies and roadmaps.
Facing significant technical challenges that need leadership guidance.
Managing technical debt and prioritizing code refactoring.
Hiring technical talent or reallocating team resources.

Approach Product Manager when:

Clarifying product requirements, user stories, and acceptance criteria.
Prioritizing features, bug fixes, and development tasks based on business needs.
Discussing user experience design and ensuring user needs are met.
Providing feedback on requirements or suggesting iterative improvements.
Coordinating release planning and aligning development with the product roadmap.
Conducting user testing and validating that features meet user needs.

Remember, CTO and Product Manager work closely together, and their roles may overlap in certain areas. Effective communication and collaboration between these roles and the development team are crucial for successful product delivery.

By understanding when to approach each role, you can ensure smoother project execution, better alignment with business objectives, and ultimately, a higher-quality product that meets user needs.

Micro frontend frameworks in 2024

Lakin Mohapatra — Wed, 13 Mar 2024 18:03:16 +0000

Micro Frontends are becoming an increasingly popular approach for building modern web applications. As opposed to building a monolithic app, micro frontends allow you to break down an app into smaller, independent pieces that can each be developed, deployed, and scaled separately.

This modular architecture brings a lot of benefits - easier maintenance, better team collaboration, faster iteration, and improved resilience. As more teams adopt this approach, the tools and frameworks ecosystem around micro frontends continues to grow.

Here are some of the most promising micro frontend frameworks to watch for in 2024:

Single-SPA Framework - One of the most popular choices. It has a large community behind it and offers robust routing and lifecycle management for microapps.
Ref - https://single-spa.js.org/
Piral Framework - Focused on developer experience with features like a visual UI editor, live previews and hot module replacement.
Ref - https://piral.io/
Luigi Framework - A very lightweight framework built by the folks at SAP.
Ref - https://luigi-project.io/
OpenComponents Framework - Strong focus on componentization and making components reusable across different microapps.
Ref- https://opencomponents.github.io/
Mosaic Framework - Built by BigCommerce. Designed specifically for ecommerce use cases. Comes with pre-built config and best practices.

Ref- https://mosaic.js.org/
Ara Framework - Build Micro-frontends easily using Airbnb Hypernova
Ref- https://ara-framework.github.io/website/
Voltran - a micro frontends framework which is developed by Hepsiburada Technology Team
Ref- https://github.com/hepsiburada/VoltranJS
qiankun - enables you and your teams to build next-generation and enterprise-ready web applications leveraging Micro Frontends. It is inspired by and based on single-spa.
Ref- https://github.com/umijs/qiankun

Angular vs React: A Comprehensive Comparison of Pros and Cons

Lakin Mohapatra — Tue, 24 Oct 2023 15:44:17 +0000

Hey folks 👋

I wanted to share a quick comparison. I wrote up some of the key pros and cons of Angular vs React.

Angular Pros

Provides more out of the box - full featured framework with routing, state management, testing tools etc built-in
Strongly typed with TypeScript - detects errors during compile time
Detailed documentation and learning resources
Better for complex enterprise applications and teams with clear structure
More scalable and maintainable codebase with OOP approach
Easier dependency injection and services

Angular Cons

Steeper learning curve especially for beginners
More complex overall with abundant features
Bootstrap time can be longer due to size of framework
More effort needed to customize things outsideAngular ecosystem

React Pros

Easier learning curve for simpler apps with just the core library
More flexibility - use with various state management, build tools, etc
Faster performance with Virtual DOM, lighter weight
Ease of integration with other libraries/frameworks
Great for progressive web apps (PWAs)
Active open source community with ecosystem of tools

React Cons

Less opinionated structure - more decisions needed for code organization
No built-in services, more glue code needed to integrate external state management etc
Less strict discipline for things like mutability which can cause bugs
JSX HTML-JavaScript mix can confuse some developers initially

Angular provides more built-in structure while React offers more flexibility. Both have pros and cons depending on the needs of the specific project and team.

Whether you're an Angular or React developer, hopefully, this gives a balanced view of both ecosystems. Let me know if you have any other thoughts on Angular vs React comparisons!

React vs Next.js — Understanding When to Use Each

Lakin Mohapatra — Fri, 08 Sep 2023 13:18:15 +0000

React is a front-end JavaScript library for building user interfaces. Next.js is a framework that augments React with server-side rendering, routing, and more.

When should you use plain React vs Next?

Use React standalone when:

👉 Building a highly dynamic single-page app that relies heavily on client-side routing and state.

👉 Integrating React components into an existing server-rendered app for hybrid rendering.

👉 Only part of the UI needs to be reactive - Next.js is overkill.

👉 You want client-side control over routing, data fetching etc.

👉 Page SEO is not a major concern.

When to use Next.js:

👉 Building a traditional website with server-side rendering and SEO requirements.

👉 You want automatic code splitting and prefetching.

👉 Easy routing and fetch handling appeals.

👉 Fast refresh and DX matters - Next.js accelerates dev workflow.

👉 You need hybrid server-side and client-side rendering.

👉 Scalable performance and static site generation benefits are important.

Here are some example apps where React or Next.js may be more suitable:

Good for React:

👉 A chat app like Slack with highly dynamic UIs, fast state updates, client-side routing for channels/messages.

👉 An e-commerce site's shopping cart and live preview - rapidly changing state and interactions.

👉 A stock trading dashboard showing live-updating graphs and notifications.

👉 An in-browser IDE with complex text editing capabilities.

👉 An interactive game with advanced animations and dynamic UIs.

Well-suited for Next.js:

👉 A marketing website for a SaaS product with SEO-friendly pages.

👉 An online course marketplace with course profiles, student dashboard, payment pages.

👉 A company website with a mix of static and interactive content.

👉 A blog with post overviews, tags, server-rendered articles.

👉 An e-commerce site's product pages, search, checkout flows.

👉 A documentation site with MDX, navigation, and search.

The key differences come down to dynamic UIs versus more static content with SEO needs. SSR and simplicity help for traditional websites while React facilitates advanced interactivity.

Overall, use React directly when you want pure client-side power and control. Use Next.js when you value SEO, simplicity, performance and don't need full frontend control.

As with any abstraction, understand the tradeoffs. And know you can always mix and match - using React for dynamic widgets in Next.js pages.

What's been your experience using React vs Next? When does each shine? Please share your thoughts and advice below!

Thanks for reading my article so far.
Connect me on Linkedin, Twitter, Instagram

If this article provided you value in some way, you can show your support to me here by clicking on the below link.

Buy me a coffee

PHP: Tackling Limitations, Boosting Performance, and Enhancing Maintainability

Lakin Mohapatra — Thu, 07 Sep 2023 07:27:19 +0000

Here are some of the main pain points and limitations developers experience with PHP:

Performance - PHP interprets code at runtime rather than compiling so it is slower for intensive tasks.
Memory usage - The PHP engine's memory handling is not as efficient as languages like C, so apps can require more resources.
Concurrency - PHP does not have native multiprocessing capabilities. Workarounds exist but can be complex.
Code execution - PHP waits until code finishes executing before returning a response, blocking the server.
Code maintenance - Dynamic typing, global state, and inconsistent function naming can make PHP apps harder to maintain.
Resource intensive - PHP apps often require more infrastructure scaling to handle load compared to other languages.
Weak typing - Lack of type safety can lead to bugs and coercion issues.
Built-in libraries - PHP's core libraries lack robustness compared to other languages.
Verbose syntax - Lots of boilerplate compared to languages with modern syntax like Python.

The key problems are performance, scalability, and difficulty maintaining large complex applications. But PHP's convenience and approachability are why it remains popular despite these downsides.

Here are some ways to mitigate PHP's limitations by integrating with other technologies:

Performance:

Use HipHop VM or PHP compilers like Phalanger to convert PHP into optimized bytecode
Offload intensive processing to background workers powered by Swoole, ReactPHP, or Amp
Implement caching with Redis or Memcached to reduce database queries
Use FFI to invoke high-performance C libraries directly from PHP code

Scalability:

Horizontally scale PHP using a load balancer and reverse proxy like Nginx
Enable autoscaling groups on cloud platforms like AWS Elastic Beanstalk
Adopt asynchronous and event-driven architectures via Swoole
Use services like Cloudflare to absorb network load

Maintainability:

Improve code quality by adopting standards like PSR-12 coding style
Leverage static analysis tools such as PHPStan and Psalm to catch bugs
Use PHP 7+ features like strict typing to identify issues early
Refactor into reusable components and libraries for modular code
Utilize design patterns more systematically

Integrating PHP with other technologies like caches, queues, and high-performance libraries/services can help overcome some of its limitations.

Building What Matters, Not What's Fun

Lakin Mohapatra — Tue, 22 Aug 2023 18:41:12 +0000

We, developers, love to build. It's in our DNA. Given free rein, we'll eagerly construct complex systems just to test our skills. But while technically stimulating, these "toy projects" done in a professional context can be detrimental.

On your own time, build whatever you want. But at work, restrain the urge to over-engineer, overbuild, or meander down rabbit holes. No matter how cool the tech is, if it doesn't align with business requirements, you're wasting precious time and resources.

The hard truth is most business leaders don't care about the elegance of your code or the complexity of your algorithms. They care about delivering business value. Fancy features or architectural flourishes that don't move the needle on product metrics are distractions.

So stay focused on building what matters to the product and customers. Refrain from overcomplicating things by adding unnecessary features. Refactor mercilessly to keep things lean. Align your work to iterative requirements, not theoretical use cases. Deliver pragmatically.

Great developers deliver the right capabilities at the right time. They don't churn out toys. Build what's needed today, not what might be interesting someday.

By maintaining deliberate focus, you will earn the respect of your managers and satisfy your customers.

What do you think? Have you seen toy project syndrome undermine delivery? What tips do you have for staying focused as a developer?

I'd love to hear your perspectives!

Connect me on Linkedin, Twitter, Instagram

Micro frontends: Building In Public From Scratch - Part 3 - Incrementally transitioning to microfrontends

Lakin Mohapatra — Wed, 16 Aug 2023 06:36:19 +0000

Welcome to the third chapter of our "Build in Public" microfrontends adventure!

No dull moments – Pure action-packed content. Lets get started.

As you know, many frontend apps face challenges with large legacy codebases tied to outdated tech stacks or rushed code due to delivery pressure. This can lead to a dilemma for project managers and technical architects. They're unsure about adopting the micro frontend architecture, fearing conflicts and despair.

However, there's a solution that relieves these worries. Instead of a complete app rewrite, the strategy is to gradually replace old app components or modules. This way, new features can be delivered to users without being slowed down by the old monolith.

Here's the trick: A single team can work on migrating one component/module at a time, while others maintain the existing parts of the codebase. Over time, this incremental approach leads to success.

Let me explain this process in detail.

Example 1

Suppose you have an old family car that's been reliable for years but is really showing its age. It's time for an upgrade but buying a brand new car would be an expensive overhaul.

Instead, you can modernize it piece-by-piece - replace the stereo one month, get new tires another month, install updated seat covers, etc.

This incremental upgrade approach lets you continuously improve the car over time.

Similarly, for an aging website with old technology, you can incrementally replace parts with new microfrontend features:

Month 1: Build a new home page as a microfrontend
Month 2: Extract checkout to a new microfrontend
Month 3: Modernize account settings as a microfrontend

This lets you upgrade the site gradually to avoid a disruptive rewrite.

Example 2

Imagine you have a 1970s-style house that you want to remodel into a modern, open floor plan.

You wouldn't bulldoze the entire house and rebuild overnight. That would be hugely disruptive for your family's living situation.

Instead, you would remodel in phases:

Phase 1: Demolish a small wing and build an open kitchen
Phase 2: Take down some walls to open up the living and dining rooms
Phase 3: Redo the closed off bedrooms into a master suite
Each phase focuses on remodeling part of the outdated house into modern style.

Over months and years, the incremental phases ultimately transition the full house.

This is less disruptive and gives flexibility to pivot plans based on learnings.

Similarly, incrementally refactoring a legacy app into microfrontends lets you focus on high value areas first while minimizing risk.

Over time, more of the application transitions in phases. But forcing overnight change is too disruptive.

Process of Incremental Transition:

1. Start Where It Matters: Get the Ball Rolling
Begin by identifying the parts of your application that will benefit most from the micro frontend approach. It's not about a complete overhaul; it's about identifying the key areas that can thrive within this new paradigm.

2. Coexistence with Monoliths: Let's Be Friends
Incremental transition doesn't mean waving goodbye to your existing monolith; it means coexisting harmoniously. Consider encapsulating micro frontends within your monolithic architecture. This enables selective migration and paves the way for gradual transformation.

3. Prioritize Use Cases: Time to Get Choosy
Prioritization is your guiding star. Choose use cases that align with business goals and user needs. This way, you incrementally improve the user experience and empower teams to innovate within their designated areas.

4. API Contracts as Connectors: The Magic Bridges
API contracts play a pivotal role in the incremental transition. They act as connectors, enabling smooth communication between micro frontends and the existing monolith. Think of them as bridges that ensure coherence and consistency.

Benefits include:

Upgrade at your own pace
Isolate riskier changes
Mix old and new code during transition
Experiment with new technologies in isolated microfrontends

So think of microfrontends as a way to modernize an outdated website incrementally, like giving an old car a piece-by-piece upgrade.

Challenges and Considerations

Of course, no transition is without challenges:

1. Synchronization: Coordinating changes across monoliths and micro frontends demands meticulous synchronization to maintain a coherent user experience.

2. Testing Strategy: Transitioning incrementally requires a thoughtful testing strategy. Ensuring compatibility and consistency during the transition is essential.

3. Communication Overhead: As micro frontends increase, so does the need for effective communication. Maintain clear lines of communication to prevent silos.

So, there you have it—your roadmap to acing the incremental transition in micro frontends. It's all about starting smart, keeping the peace, choosing your use cases, and building those magic bridges.

Next part of this series will be based on following topics :
Brief intro to web components and custom elements

Please like, follow, and share this post if you found it valuable. The more we can spread the word, the better we can collectively advance the state of web architecture.

I appreciate you coming along for the ride!
Stay tuned!

Connect me on Linkedin, Twitter, Instagram

Micro frontends: Building In Public From Scratch - Part2 - when to use Microfrontends ?

Lakin Mohapatra — Fri, 11 Aug 2023 10:08:41 +0000

Today, I decided to explore when it's a good idea to use micro frontends in projects. I usually only try new tech when I'm really sure it's worth it. So, I've started looking into it, and here's what I found. I want to help you all understand when micro frontends could be useful. Whether you're a technical architect, developer, or project manager, this information could prove to be invaluable. It can serve as a significant factor in decision-making processes.

Lets get started . No dull moments – just action-packed content.

Microfrontends work great for complex sites - but how do you know if your site complexity demands them?"

Just to remind you about Microforntend architecture , let me share few examples again.

Example 1: Office Building

Think of constructing a huge office building - you wouldn't try to build the entire massive structure as one giant block.

Instead, you separate it into smaller wings and floors that focus on specific functions. Then you integrate these pieces together into the final building.

Similarly, microfrontends split up a large web application into smaller, focused components.

Each microfrontend acts as its own wing or floor, specialized for its job. But they integrate together seamlessly into the full application building.

Constructing a massive office complex using separate wings makes sense - it allows focused specialization and independent workstreams.

Similarly, microfrontends excel when building complex web apps with:

Many complex features and large development teams
Ability to break the product into specialized domains
Need for agility on specific features without coordination overhead

However, for constructing a small office building, building separate wings may be over-engineering it.

Likewise, microfrontends may be overkill for:

Smaller, simpler web applications and teams
Apps where shared state and tight integration needs outweigh benefits
Products where consistent UX is more critical than independent features

In these cases, a traditional monolithic architecture may be preferable to avoid the overhead and complexity of microfrontends.

Example 2 :Dinner

Let's say you're cooking dinner. For a simple meal with just a main dish, doing everything in one pot or pan is easiest.

But for a super elaborate 5-course meal, you likely need multiple pots, pans, and utensils working in parallel!

Similarly, apps with lots of features and traffic often benefit from microfrontends:

Many features = multiple pots
Large teams = multiple cooks
Divide and conquer complexity
But how big is "big enough"?

Some sizing guidelines:

5+ development teams
10+ major site features
500k+ monthly site visitors

So in summary:

Simple app and team = one pot
Complex app and team = multiple micro-pots

Evaluate if your app has grown big and complex enough to justify adopting microfrontends. They really shine for elaborate 5-course meal sites!

Key points :

When To Use Microfrontends
Best use cases:

Very large, complex frontend applications
Many autonomous teams and business domains
Rapid innovation needed on specific features
App already using component architecture

When Not To Use
Avoid microfrontends if:

App is relatively small and simple
Heavy shared state and data coupling
Strong UI/UX consistency required across features
Team is unfamiliar with modular architecture

Pros and Cons

Pros:

Focused team ownership
Technology flexibility
Independent deployments
Scaling team size

Cons:

Added complexity
Integration challenges
Partial UI inconsistencies
Repeated shared code

Next part of this series will be based on following topics :
Setting expectations for incrementally transitioning to microfrontends

Please like, follow, and share this post if you found it valuable. The more we can spread the word, the better we can collectively advance the state of web architecture.

I appreciate you coming along for the ride!
Stay tuned!

Connect me on Linkedin, Twitter, Instagram

Micro frontends: Building In Public From Scratch - Part1 - What are Microfrontends ?

Lakin Mohapatra — Thu, 10 Aug 2023 09:26:28 +0000

Welcome to the first chapter of our "Build in Public" microfrontends adventure!

In this opening segment, we'll be exploring:

What microfrontends are and the core concepts
Potential benefits of using microfrontends
How microfrontends compare to monolithic architectures

Click here to read introductory post of this series.

There will surely be triumphs, stumbles, and tons of learning along the way! I’m grateful to have you alongside as we unravel the microfrontends architecture step-by-step.

To begin, let’s get grounded in what microfrontends are at a high level...

What microfrontends are and the core concepts
Microfrontends are an architectural style where frontend web applications are broken down into smaller, independently deployable units. Each unit owns a distinct business domain, user workflow, or feature set.

Microfrontends have these key characteristics:

Owned by small, decentralized teams
Independently developable, testable, and releasable
Organized around business domains and features
Compose together to form the final product

Confused? Let's explain microfrontends using the example of the Indian city of Bangalore.

Bangalore is composed of many distinct neighborhoods like Indiranagar, Koramangala, Jayanagar, etc.

Each neighborhood has its own unique vibe - but they come together to form the metro city of Bangalore.

Similarly, a large microfrontends app is divided into smaller "neighborhood" microfrontends. Each focuses on a specific feature or workflow. The microfrontends integrate together into the final application.

Potential benefits of using microfrontends
Microfrontends excel in situations like:

Very large, complex frontend apps and teams
Organization around independent business domains
Need for technology flexibility across features
Rapid iteration on specific user workflows

The modular architecture enables smaller teams to move faster on their area of focus.

Comparing to Monoliths
Traditional monolithic frontend architectures contain all of an application's logic in one massive codebase. As the codebase grows, this creates several challenges:

Coordination overhead - Large teams trip over each other trying to make changes
Slower release cycles - All changes must be bundled together for deployment
Spaghetti code - Harder to maintain clean architecture over time
Scaling difficulties - More developers does not directly speed up delivery
Technology lock-in - New frameworks hard to adopt across the codebase

Microfrontends aim to solve these issues by distributed ownership across domain-based teams:

Focused domains - Small teams own specific features end-to-end
Independent development - Teams can build, test and deploy their domains
Loose coupling - Teams can choose their own technologies
Scaling velocity - More teams directly speed up delivery
Resilience - Changes isolated to their domains

So while a monolith frontend hits bottlenecks as it scales, microfrontends unlock agility by decomposing into distributed domain teams.

However, microfrontends add integration complexity. There are tradeoffs around consistency and shared code as well.

The sweet spot is applications that are large/complex enough to justify the tradeoff. We'll explore guidelines next.

That wraps up a high-level overview explaining the core concepts and motivation behind microfrontends.

I hope this post has provided a solid foundation for what microfrontends are all about and why they may be a useful evolution for certain applications.

Excitingly, this is just the start of our microfrontends journey together.

Next part of this series will be based on following topics :

When it makes sense to use microfrontends
When not to use microfrontends
The pros and cons of a microfrontends approach
Setting expectations for incrementally transitioning to microfrontends

I’d love for these posts to reach developers across the world who could benefit from learning about microfrontends.

Please like, follow, and share this post if you found it valuable. The more we can spread the word, the better we can collectively advance the state of web architecture.

I appreciate you coming along for the ride!
Stay tuned!

𝐌𝐢𝐜𝐫𝐨 𝐟𝐫𝐨𝐧𝐭𝐞𝐧𝐝𝐬: 𝐁𝐮𝐢𝐥𝐝𝐢𝐧𝐠 𝐢𝐧 𝐏𝐮𝐛𝐥𝐢𝐜 𝐟𝐫𝐨𝐦 𝐒𝐜𝐫𝐚𝐭𝐜𝐡

Lakin Mohapatra — Tue, 08 Aug 2023 07:53:22 +0000

Micro frontends are one of the hottest web development trends right now, allowing teams to break apart monolithic codebases into independent features.

I'm excited to announce that over the next few weeks, I'll be sharing my hands-on journey of building a micro frontends architecture from scratch!

Follow along as I tackle topics like:
👉 Micro frontends basics - what are they and when to use them
👉 Implementing micro frontends - code splitting, routing, and integration
👉 State management across micro frontends
👉 Testing strategies for micro frontends
👉 Deployment and scaling considerations
👉 Lessons learned - the good, the bad, and the gotchas

I'll be documenting my successes and failures, showing real code examples, pitfalls to avoid, and tips I pick up along the way.

It will be a transparent, no-holds-barred look at the micro frontends approach from the trenches.

Whether you're already using micro frontends or just curious about them, I think you'll find value in coming along for the ride. There will be plenty of learning for developers of all levels!

Stay tuned over the next few weeks as I build out this micro frontends application in the open. Click follow so you don't miss an update!

Let me know if you have any other topics you'd like me to be sure to cover related to micro frontends. I'm excited to dive in!

Power of AI: Turning LinkedIn Data into Captivating Music!

Lakin Mohapatra — Fri, 28 Jul 2023 14:03:09 +0000

I fed my LinkedIn profile data to an AI Model, and the result is mind-blowing! Weird but Interesting.

Introduced myself via AI Music

Lyrics Generated by AI
Music Video Generated By AI

Thinking of an innovative possibility - AI's ability to take your LinkedIn profile data and transform it into an extraordinary musical creation!

Picture this: AI carefully analyzes your career milestones, accomplishments, and aspirations from your LinkedIn profile. Then, like a musical maestro, it weaves a mesmerizing melody that echoes your unique professional story.

But it doesn't end there! AI brings your journey to life through a visually stunning Music Video. The result will be a masterpiece that showcases your career in a way you've never imagined!

Don't miss this unique experiment - check out the video now!

Connect me on Linkedin, Twitter, Instagram