DEV Community: Sura

From React to => Angular - a developer's guide to TypeScript modularity

Sura — Sat, 21 Jun 2025 15:43:44 +0000

In web development one of the decisions you will face is choosing between frameworks like Angular and React. I always had used React for the past 5 years, until lately when I wasn't given a choice but dive in into Angular. As part of understanding Angular I focus on the commonality of typescript between the 2 frameworks.

I'm focusing on modularity as it's the foundation, Think of modularity like organizing your fridge by fruit & vegetables instead of throwing all your fruits into one big drawer, you separate them into different sections: apples in one drawer, oranges in another basket or something etc.. In programming modularity mean breaking your applications into smaller pieces that handles specific responsibility, following in mind engineering principles like separation of concern - separating business logic from presentation.

Angular's approach - Built in Modularity
Angular already comes with structured approach right of the box.
NgNodules - the foundation
Angular uses something called NgModules to organize the application. Think of NgModule as containers that group related components, services. and other code together.
However since Angular 17, there's another way of modularity which is a hybrid approach with something called Standalone components. I will explain more as we go along.

Ng Module example
`
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FruitComponent } from './fruit/fruit.component';
import { FruitService } from './fruit/fruit.service';

@NgModule({
declarations: [FruitComponent],
imports: [BrowserModule],
providers: [FruitService],
bootstrap: [AppComponent]
})
export class AppModule { }
`

**React's Approach - Flexible modularity:
**React doesn't enforce a specific module system to organize code, so you can organize code however you like.

import React from 'react';
import { FruitCard } from './FruitCard';
import { useFruits } from './hooks/useFruits';

export const FruitList: React.FC = () => {
const { fruits, loading } = useFruits();

if (loading) return

Loading...;

return (

{fruits.map(fruit => (

))}

);
};

custom hooks for logic sharing
React uses custom hooks to share logic between components.

For transitioning from React to Angular
Angular 17 introduced a more component-centric approach with standalone components that feels much more familiar to React developers.

**Why it makes a difference?
**No NgModules traditional way needed, components can manage their own dependencies & it's simpler model, and direct imports, you can import what you need.

Key difference in modularity between Angular and React:
*Angular
*- Services are singleton by default within modules

clear boundaries make it easy to extract reusable modules
Modules can be easily shared between applications
Steeper learning curve due to more concepts (modules, decorators, dependency injection)
Once learned, provides clear guidelines for any project
Consistency across different Angular applications
Use Angular when working on large, complex projects and you'd prefer clear guidelines and structure.
If you choose the non traditional path in Angular, you can use Standalone Components which is Similar to React's approach & flexible imports.

React

components and hooks are shared across projects
community eco system provides many reusable packages.
Easier learning curve, start with components and gradually learn patterns
More decisions to make about project structure & different React projects might look very different
Use react when it's small project, you work independently. You can still also use React in very big projects, when there's internal guidelines provided where everyone can agree on a structure.

**Getting started tips:

Angular: start with Angular Cli - it sets up the module structure for you & learn about NgModules early they are the fundamental difference and strength.
React: start with Create React or Vite for simple setup, focus on components first.

Conclusion:
Both angular and react handle typescript modularity differently, Angular provides a structured very opinionated approach, while React provides a flexible simple approach, making it easy to start something and grow with it. I'd recommend React as a start and then transition to Angular. However, since ANgular 17, you now have more choices than ever. Angular's standalone components offer a gentler learning curve, while traditional NgModules provide structure for complex applications. React continues to offer maximum flexibility.

What matters at the end is that you choose something that excites you!

Creating a react game on AWS

Sura — Tue, 14 Jan 2025 22:09:24 +0000

**Prerequisites
**AWS Account
Installed Node.js and npm
React Vite project created (npx create-vite@latest)

Setup the React + Vite Game
Initialize React Vite Project

npx create-vite@latest my-game --template react cd my-game npm install npm run dev
Ensure your game works locally.

Install Amplify CLI:
Initialize Amplify
npm install -g @aws-amplify/cli
Configure Amplify CLI:
amplify configure

Use either:

Frontend Secrets: For frontend access (AMPLIFY_API_VAR).

IAM Keys: For backend-specific operations (e.g., server-to-server communication).

Tip: If your game only fetches API data, use frontend secrets (AMPLIFY_API_VAR).

Configure CI/CD for Deployment
Connect Git Repository:

Link your GitHub/Bitbucket/GitLab repository to Amplify via the Amplify Console.

Set up the build process in the Build Settings (Amplify auto-generates amplify.yml for deployment).

Checkout my current in progress development: https://main.d28exdxgub7wqp.amplifyapp.com/

Git Tips and Tricks: 10 Years of Using Git

Sura — Mon, 06 Jan 2025 15:22:06 +0000

Happy new year!
Git is an essential tool for version control in modern development workflows.

While many developers are familiar with basic commands like git add and git commit, there are other commands that are not difficult to use, but it takes curiosity to try them and help manage complex codebases.
This blog post dives into practical Git commands and tips to help you level up your Git game, also focuses on a node based app assuming you're using npm/yarn.

Adding files
Git add: Why git add -p is Better Than git add .

When working with Git, adding changes to the staging area is a critical step before committing your work. While git add . is commonly used for convenience, git add -p offers more control and insight into your changes. Here's why git add -p is often the better choice.

When to use git add -p

You’ve made multiple changes, but only want to commit some of them.
You want to separate unrelated changes into different commits.

git add -p

When to Use git add .

git add .

can be useful when: You’ve made simple, isolated changes, and you’re confident all of them should be staged.
You’re in a rush to stage everything quickly.

Reverting to a Previous Commit: Targeted Rollbacks
To restore your working directory to the state of a specific commit, use in bash:

git checkout COMMIT_NUMBER .

Replace COMMIT_NUMBER with the SHA of the desired commit I.e. commit # e78897844.

git commit e78897844

Resolving Main Branch Issues: Common Fixes

If you're on the main branch and encounter issues, sometimes after merging code, you just need to remove and install your packages, try these steps:
Clear yarn/npm’s cache:

npm cache clean

Remove/delete with bash node_modules, make sure you use the right version of node use nvm use if the project has a defined one and reinstall dependencies:
bash

rm -rf node_modules && npm install

Interactive Rebase: Rewrite History Like a Pro
Interactive rebasing is a powerful way to edit, squash, or remove commits from your branch. Here's how you can use it i.e branch name is main

git rebase -i main

Git will open a text editor (usually Vim). You'll see a list of commits with options like pick.
To remove a commit, replace pick with d.
Press ESC followed by :wq to save and quit.

git push -f

Combine All Commits into One: Clean Up History

To squash multiple commits into one—or undo a commit—you can use soft and hard resets:

Soft reset moves back to a previous commit while keeping changes unstaged.
Hard reset moves back and removes all changes permanently.

Example: Squashing the Last 5 Commits into One
Reset the last 5 commits (replace 5 with your number):

git reset --soft HEAD~5

Stage your changes:

git add .

Commit:

git commit -m "Your new commit message"

Push forcefully:

git push -f

Working in progress files, moving them from one to another branch

git stash save "Working on DIGGROW-2610 BPI modals"
git checkout feature/another-branch
git stash list  # Find your stash (e.g., stash@{0})
git stash apply stash@{0}

Doing Code Reviews

Code reviews are a critical part of collaborative development, helping teams maintain code quality, share knowledge, and catch issues early. When conducting a review, you should first understand the feature requirements, then systematically examine all changed files.

In GitHub's web interface, there are several ways to compare files between two commits or pull requests. I typically use this URL format:

https://github.com/{owner}/{repo}/compare/{older-commit-hash}...{newer-commit-hash}

an example from a a bootcamp I attended

https://github.com/ExamProCo/free-genai-bootcamp-2025/compare/c890881...70d92251dca35aab4a79003c5f93d5c13efc7f24?diff=split&w=

When you've forked a repository and want to sync with the original author's updates, you can create a pull request comparing the owner's repository and branch to your forked version. The URL structure looks like this:

https://github.com/{original-owner}/{repo}/compare/{their-branch}...{your-username}:{repo}:{your-branch}

a real example

https://github.com/labeveryday/language-learning-assistant/compare/main...karnawis:language-learning-assistant:main

I hope that helps! These are pretty much the commands I use daily—except for cherry-picking, which I’m not a big fan of. 🙂 But hey, everyone has their own workflow! Let me know if you have any questions or if there's anything you'd add to the list.

Balancing Visual Design and Optimization in Front-End Development

Sura — Fri, 22 Nov 2024 17:25:39 +0000

In developing and designing softwares, development, there's an ongoing question: Should visuals or optimization take the lead in design? It's a question I've faced countless times throughout my decade of creating websites, applications, and games. Being both a developer and occasionally a designer has given me a unique perspective—insights into design have made me a better developer, and understanding technical constraints has made me a better designer. Striking the right balance between aesthetics and performance isn't just about compromise; it's about seeing constraints as opportunities. Meeting both visual and technical demands can elevate a digital experience from average to exceptional, provided we understand our audience’s expectations and the platform's limitation

Optimization vs. Visual Design: What’s the Priority?

Why Optimization Matters
Optimization is about functionality—making sure your website or application performs well under any circumstance. Fast-loading pages, smooth animations, intuitive navigation, and solid SEO practices contribute to an experience that feels effortless to users. Here’s why optimization needs to be a priority:

Page Speed Affects User Experience and SEO A slow website can lead to user frustration and a high bounce rate. It also negatively impacts SEO, with search engines prioritizing fast-loading sites. Tools like lazy loading, optimizing images, and efficient coding can improve loading times.
Mobile Responsiveness With mobile traffic surpassing desktop, mobile-first design has become the norm. If a design looks stunning on a desktop but falls apart on a smartphone, it’s a deal-breaker. Design should flexibly adapt to various screen sizes without sacrificing performance.
Accessibility and SEO Optimization isn’t just about speed—it's also about accessibility. Ensuring that your code follows best practices like using proper heading structures, adding alt text to images, and designing for keyboard navigation improves both SEO and usability.

Finding the Balance
The real challenge is balancing visual aesthetics with optimization. Here are a few tips to help you achieve that:

Prioritize Content Design around your content, making it the focus. A clean and intuitive layout helps users engage without distractions.
Design Mobile-First Start by designing for smaller screens and then scale up. This ensures your design performs well on all devices, prioritizing essential content.
Test and Iterate Constantly test across platforms, collect user feedback, and use analytics to make adjustments. Optimization and design need continuous refinement.

Conclusion
Balancing visual design and optimization in software development isn't a matter of choosing one over the other—it’s about finding ways for them to enhance each other. By treating constraints as creative challenges, you can create software that is both visually engaging and technically robust. Understanding your audience, adhering to best practices, and embracing platform limitations are essential to crafting a digital experience that truly stands out. When aesthetics and optimization work together, the result is software that delivers on all fronts: performance, usability, and impact.