DEV Community: Sagar

Level Up Your Sprints: How I'm Using AI to Plan Like a Boss

Sagar — Sun, 14 Sep 2025 08:40:32 +0000

Hey everyone,

So, I've been on a mission lately to seriously up my planning game. For the past few sprints, I've been experimenting with ways to get better estimations and smoother feature releases. This week, the focus was on planning a pretty big feature: a whole new cart and checkout experience for our product. Sounds fun, right?

My initial approach was the usual: gather requirements, understand the "why" behind the implementation, and dive into the designs. I figured having a solid grasp of all this would automatically lead to better planning. But, as I started actually writing the plan, I realized how tedious and inefficient it felt. That's when the "aha!" moment hit: why not let AI take a swing at this?

Enter Gemini Pro and NotebookLLM. I started by feeding all my gathered requirements and documentation into Gemini Pro to create a detailed product requirements doc. It did a surprisingly good job! Next, I wanted to identify any missing requirements or gaps in the design. I kept asking questions in the same chat, but it felt like the context was getting lost. You know how those long chat-based conversations can be!

That's when I realized NotebookLLM could be a game-changer. I loaded it up with all the knowledge I had gathered from various sources and asked it to generate a full feature delivery plan, identify potential blockers, and even create detailed Jira stories. And wow, the output was impressive!

From there, it was all about creating Jira tickets and walking the team through the plan to ensure everyone was aligned and we could get to a more accurate final estimation. We were able to pinpoint cross-team dependencies and identify tasks where there was still some uncertainty. Now, I'm simply following the plan.

One of the biggest advantages I've discovered is that having a solid plan frees up my mental space. I can focus on execution without constantly having to figure out the next task. Plus, I can easily review my progress each week and update the plan as needed.

Honestly, the benefits of working with a plan (and with AI to create it!) are huge. That's all for this week – happy planning!

My One-Month Journey with the Cursor Editor: An Honest Review

Sagar — Sat, 23 Aug 2025 08:01:54 +0000

In the fast-paced world of software development, our team is always looking for tools that can give us an edge. So, when we decided to adopt Cursor as our new primary editor, I was curious to see how it would stack up against my trusted VS Code and GitHub Copilot setup. After a month of using it for all my daily tasks, I have some experiences I'd like to share.

Here's the story of how that month went.

The Awkward First Week

The initial days were, as with any new tool, a period of adjustment. It's like trying to write with your non-dominant hand. Cursor looks and feels a lot like VS Code, but it's the small things that throw you off. The muscle memory I had built over years was suddenly in need of a refresh.

Changing settings felt a bit awkward at first. I found myself missing some familiar features, like the side-by-side file comparison (the diff view) I relied on. Even simple things like opening and closing the sidebar, chat, and terminal took some getting used to. I was so accustomed to my VS Code layout that I decided to stick with Cursor's default theme and just power through.

The "Aha!" Moment: It's a Canvas, Not Just an Editor

Just as I was getting into the new rhythm, things started to click. The magic of Cursor isn't in replicating VS Code perfectly; it's in its AI-first approach.

The biggest game-changer for me was the context. With Copilot, I was always vaguely aware of a context limit---a boundary I couldn't see but knew was there. Cursor feels different. It feels like a rough canvas where I can draw anything, anytime. I never once had to worry about it losing track of the conversation or the files we were discussing. This made planning new features and refactoring existing code feel incredibly fluid.

Another feature I initially overlooked turned out to be pure gold: the terminal command input box. When you go to type a command, a little search box pops up, suggesting commands you might want to run. It's brilliant! My only gripe is that it feels a bit intrusive, and there isn't an obvious way to quickly hide it when you just want to see the terminal output. Speaking of which, my go-to command for clearing the terminal screen didn't work, which was a small but persistent annoyance.

The Good, The Bad, and The AI

After settling in, I started to notice the finer details of day-to-day work.

What I Loved:

AI-powered Editing: Cursor truly shines when you ask it to plan and edit files. It grasps the bigger picture in a way that feels a step ahead.
The Infinite Canvas: As I said, not worrying about context limits is liberating.
Terminal Helper: That command search is a fantastic idea, even if it needs a bit of polish.

What I Missed (The Frustrations):

Core Editor Features: I still miss VS Code's smooth layout management and the side-by-side diff view. It's a fundamental tool I didn't realize I valued so much.
Extension Ecosystem: While most of my extensions were available, a key one was missing: Prompt Booster. I really relied on that extension and its MCP server to streamline my AI interactions.
Tool Management: In Copilot, I could use special @ commands to refer to my custom "MCP tools." Cursor allows this too, but you have to be very explicit. It doesn't intelligently pick the right tool for the job; you have to tell it. Also, Cursor seems to have a lower limit on tools (around 48) compared to Copilot (128). Deselecting all my tools in VS Code was a one-click affair; in Cursor, it's a bit more tedious.

The Verdict: Front-end vs. Back-end

My work is split between front-end and back-end development, and I noticed a difference in performance.

For front-end development (React, CSS, etc.), Cursor is fantastic. The experience feels just as good, if not slightly better, than VS Code.

But for back-end development, specifically with Java and Spring Boot, I feel that IntelliJ IDEA still holds the crown for its deep understanding of the ecosystem. The intelligence just isn't quite there yet in Cursor for complex Java projects. For Python, however, it worked great---pretty much on par with my old VS Code setup.

So, Am I Switching Back?

A month ago, I might have been tempted. Today, the answer is no.

Despite the missing features and the small annoyances, I've completely shifted to Cursor. The transition was an adjustment, but the destination was worth it. It's a trade-off: you lose some of the polished, mature features of a traditional editor, but you gain an AI assistant that feels deeply integrated, not just bolted on.

Cursor isn't perfect, but it feels like a glimpse into the future of coding. And for now, I'm happy to be living in it.

Exploring Bolt.new: A Promising Tool for Quick Prototyping

Sagar — Sun, 05 Jan 2025 05:02:16 +0000

In the fast-paced world of tech, the ability to quickly prototype ideas can mean the difference between success and failure for startups and product teams. This week, I had the opportunity to delve into Bolt.new, a tool specifically crafted for building prototypes and Minimum Viable Products (MVPs) with remarkable ease. If you’re a tech enthusiast passionate about innovation, you’ll find Bolt.new intriguing for its potential as a rapid prototyping solution.

The Appeal of Bolt.new

The standout feature of Bolt.new is its intuitive interface. From the moment you start, it’s clear that the developers aimed to create a seamless user experience. The setup process is quick, allowing users to transform concepts into functional prototypes within moments. This simplicity makes it particularly attractive for beginners or teams looking to validate their ideas without navigating the complexities often associated with traditional development environments.

A major advantage of using Bolt.new is the rapid iteration it offers. Whether you’re a designer sketching a new app or a developer experimenting with features, Bolt.new simplifies the process of building and testing concepts in real-time. This capacity for swift changes leads to a more agile workflow, making it easier to grasp feedback and refine ideas on the fly.

Where Bolt.new Faces Challenges

However, as with many new tools, Bolt.new isn’t without its drawbacks. Users may find the lack of essential features somewhat limiting. For instance, it currently lacks built-in version control, making it challenging for teams to manage changes effectively. Writing test cases and robust API integrations are also absent, which could pose significant obstacles for projects aiming for anything beyond a simple prototype.

Another concern lies in the way changes are applied. Currently, adjustments happen without user permission, which can lead to overwritten work and potentially lost progress. This aspect is particularly critical for teams that may be collaborating on a project, as the risks of miscommunication and unintended alterations are heightened.

Future Use Cases and Considerations

While Bolt.new excels in rapid prototyping, its scalability remains limited. For startups or teams working on production-grade applications or large-scale projects, relying solely on Bolt.new might not be advisable at this stage. The tool is optimal for contexts where speed is prioritized over robustness—think hackathons, classroom projects, or initial brainstorming sessions aimed at validating concepts.

Despite its limitations, the potential for Bolt.new is evident. With ongoing updates and enhancements aimed at addressing current shortcomings, it could evolve into a more comprehensive platform. For now, users are encouraged to approach it with caution, particularly regarding versioning and maintaining backups. Supplementary tools that handle these critical elements may be necessary to ensure a safe and efficient prototyping experience.

Conclusion

In conclusion, Bolt.new presents an exciting opportunity for tech enthusiasts and teams eager to bring their ideas to life quickly. Its strengths in simplicity and rapid iteration are significant draws, while its limitations serve as reminders of the evolving nature of prototyping tools. As it stands, Bolt.new is a valuable asset for anyone looking to validate an idea with impressive speed, but careful consideration is advised to mitigate risks and enhance the prototyping journey.

Building Resilient APIs: Mistakes I Made and How I Overcame Them

Sagar — Sun, 29 Dec 2024 08:40:46 +0000

APIs are the backbone of modern applications. When I first started building APIs with Spring Boot, I was so focused on delivering features that I overlooked one crucial aspect: resilience. I learned the hard way that an API’s ability to gracefully handle failures and adapt to different conditions is what makes it truly dependable. Let me take you through some mistakes I made along the way and how I fixed them. Hopefully, you can avoid these pitfalls in your own journey.

Mistake 1: Ignoring Timeout Configurations

What Happened: In one of my early projects, I built an API that made external calls to third-party services. I assumed those services would always respond quickly and didn’t bother setting timeouts. Everything seemed fine until traffic increased, and the third-party services started slowing down. My API would just hang indefinitely, waiting for a response.

Impact: The API’s responsiveness took a nosedive. Dependent services started failing, and users faced long delays—some even got the dreaded 500 Internal Server Error.

How I Fixed It: That’s when I realized the importance of timeout configurations. Here’s how I fixed it using Spring Boot:

@Configuration
public class RestTemplateConfig {

    @Bean
    public RestTemplate restTemplate(RestTemplateBuilder builder) {
        return builder
                .setConnectTimeout(Duration.ofSeconds(5))
                .setReadTimeout(Duration.ofSeconds(5))
                .additionalInterceptors(new RestTemplateLoggingInterceptor())
                .build();
    }

    // Custom interceptor to log request/response details
    @RequiredArgsConstructor
    public class RestTemplateLoggingInterceptor implements ClientHttpRequestInterceptor {
        private static final Logger log = LoggerFactory.getLogger(RestTemplateLoggingInterceptor.class);

        @Override
        public ClientHttpResponse intercept(HttpRequest request, byte[] body, 
                                          ClientHttpRequestExecution execution) throws IOException {
            long startTime = System.currentTimeMillis();
            log.info("Making request to: {}", request.getURI());

            ClientHttpResponse response = execution.execute(request, body);

            long duration = System.currentTimeMillis() - startTime;
            log.info("Request completed in {}ms with status: {}", 
                    duration, response.getStatusCode());

            return response;
        }
    }
}

This configuration not only sets appropriate timeouts but also includes logging to help monitor external service performance.

Mistake 2: Not Implementing Circuit Breakers

What Happened: There was a time when a our internal service we depended on went down for several hours. My API didn’t handle the situation gracefully. Instead, it kept retrying those failing requests, adding more load to the already stressed system.

Cascading failures are one of the most challenging problems in distributed systems. When one service fails, it can create a domino effect that brings down the entire system.

Impact: The repeated retries overwhelmed the system, slowing down other parts of the application and affecting all users.

How I Fixed It: That’s when I discovered the circuit breaker pattern. Using Spring Cloud Resilience4j, I was able to break the cycle.

@Configuration
public class Resilience4jConfig {

    @Bean
    public CircuitBreakerConfig circuitBreakerConfig() {
        return CircuitBreakerConfig.custom()
                .failureRateThreshold(50)
                .waitDurationInOpenState(Duration.ofSeconds(60))
                .permittedNumberOfCallsInHalfOpenState(2)
                .slidingWindowSize(2)
                .build();
    }

    @Bean
    public RetryConfig retryConfig() {
        return RetryConfig.custom()
                .maxAttempts(3)
                .waitDuration(Duration.ofSeconds(2))
                .build();
    }
}

@Service
@Slf4j
public class ResilientService {

    private final CircuitBreaker circuitBreaker;
    private final RestTemplate restTemplate;

    public ResilientService(CircuitBreakerRegistry registry, RestTemplate restTemplate) {
        this.circuitBreaker = registry.circuitBreaker("internalService");
        this.restTemplate = restTemplate;
    }

    @CircuitBreaker(name = "internalService", fallbackMethod = "fallbackResponse")
    @Retry(name = "internalService")
    public String callInternalService() {
        return restTemplate.getForObject("https://internal-service.com/data", String.class);
    }

    public String fallbackResponse(Exception ex) {
        log.warn("Circuit breaker activated, returning fallback response", ex);
        return new FallbackResponse("Service temporarily unavailable", 
                                  getBackupData()).toJson();
    }

    private Object getBackupData() {
        // Implement cache or default data strategy
        return new CachedDataService().getLatestValidData();
    }
}

This simple addition prevented my API from overwhelming itself, internal service or the third-party service, ensuring system stability.

Mistake 3: Weak Error Handling

What Happened: Early on, I didn’t put much thought into error handling. My API either threw generic errors (like HTTP 500 for everything) or exposed sensitive internal details in stack traces.

Impact: Users were confused about what went wrong, and the exposure of internal details created potential security risks.

How I Fixed It: I decided to centralize error handling using Spring’s @ControllerAdvice annotation. Here’s what I did:

@RestControllerAdvice
@Slf4j
public class GlobalExceptionHandler extends ResponseEntityExceptionHandler {

    @ExceptionHandler(HttpClientErrorException.class)
    public ResponseEntity<ErrorResponse> handleHttpClientError(HttpClientErrorException ex, 
                                                             WebRequest request) {
        log.error("Client error occurred", ex);

        ErrorResponse error = ErrorResponse.builder()
                .timestamp(LocalDateTime.now())
                .status(ex.getStatusCode().value())
                .message(sanitizeErrorMessage(ex.getMessage()))
                .path(((ServletWebRequest) request).getRequest().getRequestURI())
                .build();

        return ResponseEntity.status(ex.getStatusCode()).body(error);
    }

    @ExceptionHandler(Exception.class)
    public ResponseEntity<ErrorResponse> handleGeneralException(Exception ex, 
                                                              WebRequest request) {
        log.error("Unexpected error occurred", ex);

        ErrorResponse error = ErrorResponse.builder()
                .timestamp(LocalDateTime.now())
                .status(HttpStatus.INTERNAL_SERVER_ERROR.value())
                .message("An unexpected error occurred. Please try again later.")
                .path(((ServletWebRequest) request).getRequest().getRequestURI())
                .build();

        return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(error);
    }

    private String sanitizeErrorMessage(String message) {
        // Remove sensitive information from error messages
        return message.replaceAll("(password|secret|key)=\\[.*?\\]", "$1=[REDACTED]");
    }
}

This made error messages clear and secure, helping both users and developers.

Mistake 4: Neglecting Rate Limiting

What Happened: One fine day, we launched a promotional campaign, and the traffic to our API skyrocketed. While this was great news for the business, some users started spamming the API with requests, starving others of resources.

Impact: Performance degraded for everyone, and we received a flood of complaints.

How I Fixed It: To handle this, I implemented rate limiting using Bucket4j with Redis. Here’s an example:

@Configuration
@EnableCaching
public class RateLimitConfig {

    @Bean
    public RedisTemplate<String, Object> redisTemplate(RedisConnectionFactory connectionFactory) {
        RedisTemplate<String, Object> template = new RedisTemplate<>();
        template.setConnectionFactory(connectionFactory);
        return template;
    }

    @Bean
    public RateLimiterFilter rateLimiterFilter(RedisTemplate<String, Object> redisTemplate) {
        return new RateLimiterFilter(redisTemplate);
    }
}

@Component
@Slf4j
public class RateLimiterFilter extends OncePerRequestFilter {

    private final RedisTemplate<String, Object> redisTemplate;
    private final int RATE_LIMIT = 100; // requests per minute

    @Override
    protected void doFilterInternal(HttpServletRequest request, 
                                  HttpServletResponse response, 
                                  FilterChain filterChain) throws ServletException, IOException {
        String clientId = getClientId(request);
        String key = "rate_limit:" + clientId;

        Long requests = redisTemplate.opsForValue()
                .increment(key, 1);

        if (requests == 1) {
            redisTemplate.expire(key, 1, TimeUnit.MINUTES);
        }

        if (requests > RATE_LIMIT) {
            log.warn("Rate limit exceeded for client: {}", clientId);
            response.setStatus(HttpStatus.TOO_MANY_REQUESTS.value());
            return;
        }

        filterChain.doFilter(request, response);
    }

    private String getClientId(HttpServletRequest request) {
        // Implement client identification strategy
        return Optional.ofNullable(request.getHeader("X-API-Key"))
                .orElse(request.getRemoteAddr());
    }
}

This ensured fair usage and protected the API from abuse.

Mistake 5: Overlooking Observability

What Happened: Whenever something went wrong in production, it was like searching for a needle in a haystack. I didn’t have proper logging or metrics in place, so diagnosing issues took way longer than it should have.

Impact: Troubleshooting became a nightmare, delaying issue resolution and frustrating users.

How I Fixed It: I added Spring Boot Actuator for health checks and integrated Prometheus with Grafana for metrics visualization:

management:
  endpoints:
    web:
      exposure:
        include: health, metrics
  endpoint:
    health:
      show-details: always

I also implemented structured logging using the ELK Stack (Elasticsearch, Logstash, Kibana). This made logs far more actionable.

Takeaways

Building resilient APIs is a journey, and mistakes are part of the process. Here are the key lessons I learned:

Always configure timeouts for external calls.
Use circuit breakers to prevent cascading failures.
Centralize error handling to make it clear and secure.
Implement rate limiting to manage traffic spikes.

These changes transformed how I approach API development. If you’ve faced similar challenges or have other tips, I’d love to hear your stories!

End Note: Remember that resilience is not a feature you add—it's a characteristic you build into your system from the ground up. Each of these components plays a crucial role in creating APIs that not only work but continue to work reliably under stress.

How to Capture Screenshots with Puppeteer

Sagar — Fri, 01 Jan 2021 10:28:24 +0000

Introduction

Welcome to my updated article on capturing screenshots with Puppeteer! Since my last blog in 2021, I've gained more experience with Puppeteer and discovered new techniques that can make your screenshot-capturing tasks even more efficient. In this article, I will provide an overview of Puppeteer, walk you through the installation process, and share code examples for capturing screenshots of web pages, including multiple screenshots in one go.

What is Puppeteer.

Puppeteer is a powerful Node.js library backed by Google that offers a high-level API for controlling headless Chrome or Chromium using DevTools protocols. It enables developers to perform various tasks such as capturing screenshots and PDFs of web pages, running end-to-end test cases, diagnosing performance-related issues, and much more.

Installation

Before we dive into the code, let's ensure you have Puppeteer properly installed. You can install it via npm or yarn using the following command:

npm install puppeteer

Please note that when you install Puppeteer, it downloads a recent version of Chromium, which may take some time depending on your network speed.

Capture a GitHub Profile Screenshot

Let's start by capturing a screenshot of a GitHub profile. I've updated the code to make it more concise and added some error handling.

const fs = require("fs");
const puppeteer = require("puppeteer");

async function captureScreenshot() {
  const targetUrl = "https://github.com/sagar-gavhane";
  const screenshotPath = "screenshots/github-profile.jpeg";

  try {
    // Launch headless Chromium browser
    const browser = await puppeteer.launch({ headless: true });

    // Create a new page
    const page = await browser.newPage();

    // Set viewport width and height
    await page.setViewport({ width: 1440, height: 1080 });

    // Navigate to the target URL
    await page.goto(targetUrl);

    // Capture screenshot and save it
    await page.screenshot({ path: screenshotPath });
    await browser.close();
    console.log("\n🎉 GitHub profile screenshot captured successfully.");
  } catch (err) {
    console.log("❌ Error: ", err.message);
  }
}

captureScreenshot();

Capture Multiple Screenshots

In real-world scenarios, capturing multiple screenshots might be a common requirement. Let me show you how you can do that with Puppeteer. We'll use a pages.json file to store the URLs and names of the web pages we want to capture.

Here's an updated version of the function:

[
  {
    "id": "c1472465-ede8-4376-853c-39274242aa69",
    "url": "https://github.com/microsoft/vscode",
    "name": "VSCode"
  },
  {
    "id": "6b08743e-9454-4829-ab3a-91ad2ce9a6ac",
    "url": "https://github.com/vuejs/vue",
    "name": "vue"
  },
  {
    "id": "08923d12-caf2-4d5e-ba41-3019a9afbf9b",
    "url": "https://github.com/tailwindlabs/tailwindcss",
    "name": "tailwindcss"
  },
  {
    "id": "daeacf42-1ab9-4329-8f41-26e7951b69cc",
    "url": "https://github.com/getify/You-Dont-Know-JS",
    "name": "You Dont Know JS"
  }
]

const fs = require("fs");
const puppeteer = require("puppeteer");
const pages = require("./pages.json");

async function captureMultipleScreenshots() {
  if (!fs.existsSync("screenshots")) {
    fs.mkdirSync("screenshots");
  }

  try {
    // Launch headless Chromium browser
    const browser = await puppeteer.launch({ headless: true });
    // Create a new page
    const page = await browser.newPage();

    // Set viewport width and height
    await page.setViewport({
      width: 1440,
      height: 1080,
    });

    for (const { id, name, url } of pages) {
      await page.goto(url);
      await page.screenshot({ path: `screenshots/${id}.jpeg` });
      console.log(`✅ ${name} - (${url})`);
    }

    await browser.close();
    console.log(`\n🎉 ${pages.length} screenshots captured successfully.`);
  } catch (err) {
    console.log("❌ Error: ", err.message);
  }
}

captureMultipleScreenshots();

Conclusion

Puppeteer is an excellent tool for capturing screenshots and automating browser-related tasks. In this updated article, I've shown you how to capture a single screenshot as well as multiple screenshots with Puppeteer, making your web scraping and testing workflows more efficient and productive.

Feel free to explore Puppeteer's extensive API documentation on GitHub to discover even more features and capabilities.

Happy coding! 🚀

References

How to build a blog with Next.js

Sagar — Sun, 31 May 2020 17:00:47 +0000

Hi there, I hope you're doing well. 😊

My name is Sagar, and I'm working as a software engineer at Fabric. I would like to share my thoughts and experiences. Building a blazing-fast blog is my dream project and many times I started but I failed in the middle. After the release of Next.js's 9.3 we can easily generate static pages with this help of SSG (Static Site Generation) APIs. In this blog post, we're going to build a blog website from scratch using Next.js. Before we start writing code I want to answer one question.

In this blog post

Why I choose Next.js over Gatsby?
Project setup
App structure
Create blog content
What is getStaticProps() method?
What is getStaticPaths() method?
Conclusion
References

Why I choose Next.js over Gatsby?

Here, I don't want to say Gatsby is bad. Next.js and Gatsby have their own advantages. But I found that with Gatsby I've to do extra configuration and with Next.js we don't need it. And also there are many Gatsby plugin available to us to easy our development pain.

There is a good article available to compare Next.js and Gatsy features.

Enough theory let's start coding…

Project setup

Create the project folder and initialize it using npm.

mkdir my-personal-blog 
cd my-personal-blog
npm init --y

npm init --y command will create package.json file at root level.

Install next, react, and react-dom in your project. Make sure you're next.js version is 9.3 or later else SSG APIs will not work.

npm install next react react-dom --save
npm install uuid unified remark-html remark-highlight.js remark-parse gray-matter --save-dev

Okay, wait for a while let me quickly explain project dependencies.

uuid - For the creation of RFC4122 UUIDs.
unified - Interface for parsing, inspecting, transforming, and serializing content through syntax trees.
remark-html - Remark plugin to compile Markdown to HTML
remark-highlight.js - Remark plugin to highlight code blocks with highlight.js.
remark-parse - Remark plugin to parse Markdown
gray-matter - Parse front-matter from a string or file.

Open package.json and add the following scripts:

"scripts": {   
  "dev": "next",   
  "build": "next build",
  "start": "next start"
}

App structure

Before we start writing code, go ahead and set up your folder structure so it looks like this:

/my-personal-blog/
|--/components
|--/node_modules
|--/contents
|--/pages
|----/index.js
|----/blog
|------/[slug].js
|--/styles
|----/global.css
|--/utils
|--package.json

Create blog content

One more step, Let's add a hello-world.md file to our project's contents folder, create a file with name hello-world.md, and add below markdown content. Later, we'll render this content on the website.

---
title: My first blog
slug: hello-world
date: "31-05-2020"
---

Pellentesque condimentum velit vel justo rutrum, sit amet commodo diam tincidunt. Nunc diam massa, interdum ut aliquet at, scelerisque ac ex. Integer cursus sem ac pretium posuere. Ut at odio nulla. Phasellus nec ante luctus, egestas dui id, maximus dui. In aliquam elit sit amet sollicitudin luctus. Nunc nec leo quis ante vestibulum egestas. In dignissim libero vitae congue bibendum. Sed iaculis eros a leo pellentesque, et ultrices leo malesuada. Nullam ultrices rutrum accumsan. Pellentesque tempus sapien et vestibulum placerat.

Donec ultrices in tortor eget facilisis. Pellentesque orci risus, vulputate consequat fermentum eget, euismod sed nulla. Sed luctus sapien quis magna lobortis porttitor. In porttitor nibh id tincidunt imperdiet. Suspendisse ultricies tellus dolor, et gravida tortor vehicula quis. Maecenas tempus est sit amet congue rhoncus. Vivamus vitae felis lacinia, viverra nibh id, pulvinar eros. In viverra venenatis ligula, vitae efficitur felis vehicula vitae. Vestibulum feugiat vel risus iaculis tincidunt.

Create a pages directory inside your project and populate pages/index.js with the following contents:

import React from "react";
import Link from "next/link";

function IndexPage(props) {
  return (
    <div>
      <h1>Blog list</h1>
      <ul>
        {props.blogs.map((blog, idx) => {
          return (
            <li key={blog.id}>
              <Link href={`/blog/${blog.slug}`}>
                <a>{blog.title}</a>
              </Link>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

// This function gets called at build time on server-side.
export async function getStaticProps() {
  const fs = require("fs");
  const matter = require("gray-matter");
  const { v4: uuid } = require("uuid");

  const files = fs.readdirSync(`${process.cwd()}/contents`, "utf-8");

  const blogs = files
    .filter((fn) => fn.endsWith(".md"))
    .map((fn) => {
      const path = `${process.cwd()}/contents/${fn}`;
      const rawContent = fs.readFileSync(path, {
        encoding: "utf-8",
      });
      const { data } = matter(rawContent);

      return { ...data, id: uuid() };
    });

    // By returning { props: blogs }, the IndexPage component
  // will receive `blogs` as a prop at build time
  return {
    props: { blogs },
  };
}

export default IndexPage;

Lots of things going on in the above index.jsx file. Here, we've created a functional component called IndexPage and it's will accepting blogs data as a prop from the getStaticProps method. Before understanding code write inside getStaticProps() method I would like to explain getStaticProps().

// Detect dark theme var iframe = document.getElementById('tweet-1237096480638451713-335'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1237096480638451713&theme=dark" }

What is `getStaticProps()` method?

In simple terms this method only runs at build-time and will pass props to page component for pre-rendering and also it doesn't receive any request time data like query parameters or HTTP headers.

Mostly useful in fetching data at build time and the source could be APIs, static files, or even do database queries.

From a performance point of view, If you pre-build pages then there is no need to pass extra bundled js to users. That will drastically increase page interaction time.

Let’s back to the IndexPage component, if you walk through code written inside getStaticProps() you’ll see I’m requiring built-in fs module to read a _content folder from current directory using process.cwd(). fs.readdirSync(path) will give me all files listed in _content folder. so I’m filtering markdown files only (files that end with .md).

I’m iterating on files and passing these file content to the gray-matter which will parse front-matter markdown file and return me object which will have data and content property. In this getStaticProps() method we don’t need content so I’m skipping it but on the specific blog page we need it.

By returning { props: blogs }, the IndexPage component will receive blogs as a prop at build time.

From IndexPage component, I'm mapping over blogs props and rendering all blogs with Link tag so we'll able to navigate to specific blog.

Now, it's time to accept slug from the query parameter and render blog content onto the screen. Let's create a file called [slug].js inside pages/blog/ folder and take a look at below BlogPostPage component. To statically generate all blog posts based on the markdown files, we'll need to specify what path we should generate for. To do this, we need to export an async function getStaticPaths().

// file: pages/blog/[slug].js
import React from "react";

function BlogPostPage(props) {
  return (
    <div>
            <h1>{props.blog.title}</h1>
      <section dangerouslySetInnerHTML={{ __html: props.blog.content }}></section>
    </div>
  );
}

// pass props to BlogPostPage component
export async function getStaticProps(context) {
  const fs = require("fs");
  const html = require("remark-html");
  const highlight = require("remark-highlight.js");
  const unified = require("unified");
  const markdown = require("remark-parse");
  const matter = require("gray-matter");

  const slug = context.params.slug; // get slug from params
  const path = `${process.cwd()}/contents/${slug}.md`;

    // read file content and store into rawContent variable
    const rawContent = fs.readFileSync(path, {
    encoding: "utf-8",
  });

  const { data, content } = matter(rawContent); // pass rawContent to gray-matter to get data and content

  const result = await unified()
    .use(markdown)
    .use(highlight) // highlight code block
    .use(html)
    .process(content); // pass content to process

  return {
    props: {
            blog: {
                ...data,
          content: result.toString(),
            }
    },
  };
}

// generate HTML paths at build time
export async function getStaticPaths(context) {
  const fs = require("fs");

    const path = `${process.cwd()}/contents`;
  const files = fs.readdirSync(path, "utf-8");

    const markdownFileNames = files
    .filter((fn) => fn.endsWith(".md"))
    .map((fn) => fn.replace(".md", ""));

  return {
    paths: markdownFileNames.map((fileName) => {
      return {
        params: {
          slug: fileName,
        },
      };
    }),
    fallback: false,
  };
}

export default BlogPostPage;

What is `getStaticPaths()` method?

This method defines a list of paths that have to be rendered to HTML at build time useful if a page has dynamic routes like blog/[slug].js. Next.js will statically pre-render all the paths specified by getStticPaths(). From getStaticPaths() method mandatory to returns path and a fallback key. If fallback is false, then any paths not returned by getStaticPaths() at build time will result in a 404 page.

Here you'll find git repository: https://github.com/sagar-gavhane/my-personal-blog

Conclusion

Creating a blog website with Next.js is pretty straightforward. There are only a few steps we've to follow like reading files, and parsing inside getStaticProps() and generating pre-rendered paths using getStaticPaths() method. I found that lots of folks are trying to utilizing this powerful feature to pre-render static pages. Recently, Next.js announced an incremental static regeneration feature in Next.js v9.4 this will help us statically pre-render an infinite number of pages.

Reference Links

Thanks for reading. I hope you like this article feel free to like, comment, or share this article with your friends. For a more depth understanding of Next.js API's checkout official documentation website.

React Performance Optimization

Sagar — Sun, 26 Apr 2020 10:34:35 +0000

Hey folks, I hope you' all doing well.

After a long time break, I'm again focusing on writing articles on dev.to. In this article, I want to cover a way to avoid re-renders of react components.

#1 Avoid passing unnecessary props to children components

Component with limited props is always performed better than component having many props. This is always a good way to drop props that are not used inside children components. Here is an example that shows a clear picture of it.

import React from 'react'
import { render } from 'react-dom'

function Avatar(props) {
  return (
    <div className="avatar-wrapper">
      <img className="avatar-img" alt="avatar" src={props.user.image} />
      <div className="avatar-name">{props.user.name}</div>
    </div>
  )
}

const user = {
  id: 1,
  name: 'Leanne Graham',
  image: 'https://i.picsum.photos/id/237/200/300.jpg',
  username: 'Bret',
  email: 'Sincere@april.biz',
  address: {
    street: 'Kulas Light',
    city: 'Gwenborough',
    zipcode: '92998-3874',
  },
}

render(<Avatar user={user} />, document.getElementById('root'))

In this example, <Avatar /> component only needs image and name props. So whenever other props like username, email, or address get updated then <Avatar /> component re-renders. That's leading to a performance issue in the long term. There are many ways to drop props and this is up to you how you want to drop passing props. Here is the way I do.

import React from 'react'
import { render } from 'react-dom'

function Avatar(props) {
  return (
    <div className="avatar-wrapper">
      <img className="avatar-img" alt="avatar" src={props.image} />
      <div className="avatar-name">{props.name}</div>
    </div>
  )
}

const user = {
  id: 1,
  name: 'Leanne Graham',
  image: 'https://i.picsum.photos/id/237/200/300.jpg',
  username: 'Bret',
  email: 'Sincere@april.biz',
  address: {
    street: 'Kulas Light',
    city: 'Gwenborough',
    zipcode: '92998-3874',
  },
}

render(
  <Avatar name={user.name} image={user.image} />,
  document.getElementById('root')
)

#2 Common fixing scenarios for object & function props

React is one-way data flow down the component hierarch. So sometimes we may need to pass a function to the child component. When we're passing object and functional props to children component then we've to do one more step to avoid re-creating objects and function during re-renders. Here is an example that will better explain this concept.

import React from 'react'
import { render } from 'react-dom'

function Alert(props) {
  return (
    <div
      className="alert-wrapper"
      style={{ display: props.showAlert ? 'block' : 'none' }}
    >
      <div className="alert-close" onClick={props.handleCloseAlert}>
        X
      </div>
      <div className="alert-title">{props.alertData.title}</div>
      <div className="alert-description">{props.alertData.description}</div>
    </div>
  )
}

function App() {
  const [showAlert, setShowAlert] = React.useState(false)
  const [counter, setCounter] = React.useState(0)

  const alertData = {
    title: 'There was an error processing your request',
    description: 'Please try again...',
  }

  const handleShowAlert = () => {
    setShowAlert(true)
  }

  const handleCloseAlert = () => {
    setShowAlert(false)
  }

  const handleIncrementCounter = () => {
    setCounter(counter + 1)
  }

  return (
    <div>
      <button onClick={handleIncrementCounter}>counter: {counter}</button>
      <button onClick={handleShowAlert}>Show Me Alert</button>
      <Alert
        showAlert={showAlert}
        alertData={alertData}
        handleCloseAlert={handleCloseAlert}
      />
    </div>
  )
}

render(<App />, document.getElementById('root'))

In this example, we've created two components <App /> and <Alert />. <App/> is a parent component where we've defined stateful logic for handling <Alert /> component. Here are some ReactDevTool profiler images for understanding whats going on.

Whenever parent component state gets updated then children also get re-rendered and we can avoid re-renders of children component by using memo, PureComponent, or shouldComponentUpdate() method. But this is will not help you for comparing object and functional props because every time it will create a new reference for object and function. There are a couple of ways to prevent re-creating it.

For object, you need to wrap object inside React.useMemo() like below.

const alertData.= React.useMemo(() => {
    title: 'There was an error processing your request',
    description: 'Please try again...'
}, [])

For functions, you need to wrap function inside React.useCallback() like below.

const handleCloseAlert = React.useCallback(() => {
    setShowAlert(false)
}, [])

Second argument for React.useMemo() and React.useCallback() is array dependencies. Empty array of dependencies specific that we don't want to re recompute value for React.useMemo() and memoized callback for React.useCallback(). There may be a circumstance where we've to recompute values and memoized callbacks and that's up to you.

Here is an improved version of the above example.

import React from 'react'
import { render } from 'react-dom'

function Alert(props) {
  return (
    <div
      className="alert-wrapper"
      style={{ display: props.showAlert ? 'block' : 'none' }}
    >
      <div className="alert-close" onClick={props.handleCloseAlert}>
        X
      </div>
      <div className="alert-title">{props.alertData.title}</div>
      <div className="alert-description">{props.alertData.description}</div>
    </div>
  )
}

function App() {
  const [showAlert, setShowAlert] = React.useState(false)
  const [counter, setCounter] = React.useState(0)

  const alertData = React.useMemo(
    () => ({
      title: 'There was an error processing your request',
      description: 'Please try again...',
    }),
    []
  )

  const handleShowAlert = React.useCallback(() => {
    setShowAlert(true)
  }, [])

  const handleCloseAlert = React.useCallback(() => {
    setShowAlert(false)
  }, [])

  const handleIncrementCounter = React.useCallback(() => {
    setCounter(counter + 1)
  }, [counter])

  return (
    <div>
      <button onClick={handleIncrementCounter}>counter: {counter}</button>
      <button onClick={handleShowAlert}>Show Me Alert</button>
      <Alert
        showAlert={showAlert}
        alertData={alertData}
        handleCloseAlert={handleCloseAlert}
      />
    </div>
  )
}

render(<App />, document.getElementById('root'))

#3 React.memo with react-fast-compare

Using React.memo() for every component is risky because it explicitly caches the function, which means that it stores the result in memory. If you do this with too many or too big components this leads to more memory consumption. That's why you should be careful when memoizing large components.

Dan Abramov

@dan_abramov

Why doesn’t React put memo() around every component by default? Isn’t it faster? Should we make a benchmark to check?

Ask yourself:

Why don’t you put Lodash memoize() around every function? Wouldn’t that make all functions faster? Do we need a benchmark for this? Why not?

01:22 AM - 12 Jan 2019

34 295

Mostly, we can avoid re-rendering by passing limited props. if you still want to use React.memo() then firstly see if default React.memo will works for you. If it won't then understand and identify the bottleneck in your component by using ReactDevTools profiler. After all, you determined that this problem could be resolved by using deep equality checks between prevProps and nextProps.

Let's see in the example,

import React from 'react'
import { render } from 'react-dom'
import isEqual from 'react-fast-compare'

function Input(props) {
  return <input value={props.value} onChange={props.handleOnChange} />
}

const MemoizedInput = React.memo(Input, isEqual)

function App() {
  const [username, setUsername] = React.useState('')

  const handleOnChange = React.useCallback((e) => {
    setUsername(e.target.value)
  }, [])

  return <MemoizedInput value={username} handleOnChange={handleOnChange} />
}

render(<App />, document.getElementById('root'))

Thanks for reading. I hope you like this article feel free to like, comment, or share this article with your friends.

Build a RESTful API with the Serverless Framework

Sagar — Fri, 19 Oct 2018 18:32:17 +0000

Today, we’re going to implement serverless RESTful API services by using “Serverless Framework”. There are many cloud services provider offers serverless functionality like AWS Lambda, Azure Functions, and Google CloudFunctions but in this article, I’m sticking with AWS Lambda as a cloud service provider.

If you don’t know about the serverless idea then I strongly recommended that first checkout this video and come back once finished it.

Serverless Framework

The serverless framework is an open source CLI tool that allows us to build, configure and deploy serverless functions (In our case, AWS Lambda functions).

Without "Serverless Framework", we have to go manually on console then create and configure necessary resources. That’s okay when the project is small and functions are limited but as soon as the project grows then creating and configuring resources is a challenging task and in lots of case unmaintainable. Writing code on console and managing team workflow becomes a tedious job.

With a "Serverless Framework", we can quickly build, configure and deploy resources within few commands. We can store our code and configuration into a centralized repository so we can design proper workflow and developers can later write, reuse and refer other developers codebase.

There are lots of significant advantages of using a serverless framework instead of doing manually work.

In this article, we're going to build a serverless Pokemon RESTful API services with a "Serverless Framework". Checkout below table for reference.

The code for this article can be found here: https://github.com/sagar-gavhane/pokemon-app

#	ENDPOINT	METHOD	DESCRIPTION
1	pokemon/	GET	Get a list of all pokemon from the database
2	pokemon/{id}	GET	Get a specific pokemon.
3	pokemon/	POST	Add new pokemon to the database.
4	pokemon/{id}	PUT	Update existing pokemon.
5	pokemon/{id}	DELETE	Delete existing pokemon.

Prerequisites

Install the following tools and frameworks:

Node.js 8.10 or above
MySQL
Visual Studio Code (preffered) or any code editor
Postman

Next, create the project folder and initialize it using npm.

mkdir pokemon-app
cd pokemon-app
npm init -f

Dependencies

Install the following packages to work with "Serverless Framework"

express - Fast, unopinionated, minimalist web framework for Node.js.
body-parser - Parse incoming request bodies in a middleware before your handlers, available under the req.body property.
mysql - A pure node.js JavaScript Client implementing the MySql protocol.
serverless - Framework for operationalize serverless development.
serverless-http - Plugin allows you to wrap express API for serverless use.
serverless-offline - Plugin to emulate AWS Lambda and API Gateway for speed up local development.

First up, we’ll install the serverless CLI:

npm install -g serverless

Now, let's install plugins and libraries step by step.

npm install express body-parser mysql serverless-http --save # app dependancies
npm install serverless-offline --save-dev # development dependancies

App structure

Before we start writing the handler code, we’re going to structure the project folder and configure our tools.

Create the following structure at the root level:

/pokemon-app/
|--/configs
|----/dbConfig.js
|--/node_modules
|--.gitignore
|--index.js
|--package.json
|--serverless.yml

Make sure to list private files into .gitignore file so that we don’t accidentally commit it to public repository. Copy paste raw material from https://www.gitignore.io/api/node to .gitignore file.

serverless.yml file serves as a manifest for our RESTful api service. Where we define our functions, events, and necessary resources. Later, with serverless CLI we configure and deploy our service to AWS infrastructure.

# serverless.yml
service: pokemon-service

provider:
  name: aws
  runtime: nodejs8.10
  stage: dev
  region: us-east-1
  memorySize: 512

functions:
  pokemonFunc:
    handler: index.handler
    events:
      - http:
          path: pokemon
          method: get
      - http:
          path: pokemon/{id}
          method: get
      - http:
          path: pokemon
          method: post
      - http:
          path: pokemon/{id}
          method: put
      - http:
          path: pokemon/{id}
          method: delete

plugins:
  - serverless-offline

We are doing a few things here:

service: pokemon-service is a name of the service. You can give any type name for your service.
provider: This is where we specify the name of the provider we’re using (AWS as cloud service provider) and configurations specific to it. In our case, we’ve configured the runtime (Node.js) with 8.10 version and region to us-east-1.
functions: We specify the functions provided by our service, Here I'm specifying pokemonFunc as function name with http events. We can also say that this is our AWS Lambda function.

We have to store our pokemon somewhere, for sake of simplicity I'm chosen MySQL but you can also use another type database. I have already created a database with name pokemon_db and inside a database created table pokemon_tb with id, name, height, weight, avatar, and createAt columns.

CREATE TABLE `pokemon_tb` (
  `id` int(11) NOT NULL,
  `name` varchar(255) NOT NULL,
  `height` float NOT NULL,
  `weight` float NOT NULL,
  `avatar` varchar(255) NOT NULL,
  `createdAt` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

ALTER TABLE `pokemon_tb` ADD PRIMARY KEY (`id`);

ALTER TABLE `pokemon_tb` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;

Rather than creating and managing connections every time, we configure pool connections once inside dbConfig.js file and reused it multiple times.

// dbConfig.js
const mysql = require('mysql')
const pool  = mysql.createPool({
  host            : 'localhost',
  user            : 'root',
  password        : '12345',
  database        : 'pokemon_app_db',
})

module.exports = pool

Writing the handler function

Let's focus on handling RESTful api route inside the index.js file with express. First, we imported the serverless-http package at the top. Second, we exported a handler function which is our application wrapped in the serverless package.

Here, we're implementing basic five routes for handling crud operation with pokemon (without any validation).

const express = require('express')
const serverless = require('serverless-http')
const bodyParser = require('body-parser')
const pool = require('./configs/dbConfig')

const app = express()

app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: true }))

// Handle pokemon GET route for all pokemon
app.get('/pokemon/', (req, res) => {
  const query = 'SELECT * FROM pokemon_tb'
  pool.query(query, (err, results, fields) => {
    if (err) {
      const response = { data: null, message: err.message, }
      res.send(response)
    }

    const pokemons = [...results]
    const response = {
      data: pokemons,
      message: 'All pokemons successfully retrieved.',
    }
    res.send(response)
  })
})

// Handle pokemon GET route for specific pokemon
app.get('/pokemon/:id', (req, res) => {
  const id = req.params.id
  const query = `SELECT * FROM pokemon_tb WHERE id=${id}`
  pool.query(query, (err, results, fields) => {
    if (err) {
      const response = { data: null, message: err.message, }
      res.send(response)
    }

    const pokemon = results[0]
    const response = {
      data: pokemon,
      message: `Pokemon ${pokemon.name} successfully retrieved.`,
    }
    res.status(200).send(response)
  })
})

// Handle pokemon POST route
app.post('/pokemon/', (req, res) => {
  const { name, height, weight, avatar } = req.body

  const query = `INSERT INTO pokemon_tb (name, height, weight, avatar) VALUES ('${name}', '${height}', '${weight}', '${avatar}')`
  pool.query(query, (err, results, fields) => {
    if (err) {
      const response = { data: null, message: err.message, }
      res.send(response)
    }

    const { insertId } = results
    const pokemon = { id: insertId, name, height, weight, avatar }
    const response = {
      data: pokemon,
      message: `Pokemon ${name} successfully added.`,
    }
    res.status(201).send(response)
  })
})

// Handle pokemon PUT route
app.put('/pokemon/:id', (req, res) => {
  const { id } = req.params
  const query = `SELECT * FROM pokemon_tb WHERE id=${id} LIMIT 1`
  pool.query(query, (err, results, fields) => {
    if (err) {
      const response = { data: null, message: err.message, }
      res.send(response)
    }

    const { id, name, height, weight, avatar } = { ...results[0], ...req.body }
    const query = `UPDATE pokemon_tb SET name='${name}', height='${height}', weight='${weight}', avatar='${avatar}' WHERE id='${id}'`
    pool.query(query, (err, results, fields) => {
      if (err) {
        const response = { data: null, message: err.message, }
        res.send(response)
      }

      const pokemon = {
        id,
        name,
        height,
        weight,
        avatar,
      }
      const response = {
        data: pokemon,
        message: `Pokemon ${name} is successfully updated.`,
      }
      res.send(response)
    })
  })
})

// Handler pokemon DELETE route
app.delete('/pokemon/:id', (req, res) => {
  const { id } = req.params
  const query = `DELETE FROM pokemon_tb WHERE id=${id}`
  pool.query(query, (err, results, fields) => {
    if (err) {
      const response = { data: null, message: err.message }
      res.send(response)
    }

    const response = {
      data: null,
      message: `Pokemon with id: ${id} successfully deleted.`,
    }
    res.send(response)
  })
})

// Handle in-valid route
app.all('*', function(req, res) {
  const response = { data: null, message: 'Route not found!!' }
  res.status(400).send(response)
})

// wrap express app instance with serverless http function
module.exports.handler = serverless(app)

Terminal snapshot:

Get all pokemon:

Get pokemon by id:

Add new pokemon:

Update existing pokemon:

Delete existing pokemon:

Deployment

Deloying services with serverless framework is so simple, we require to just hit deploy command.

serverless deploy

I have not setup a MySQL database on my AWS account hence RESTful services will not work on my AWS infrastructure. Later, I will deploy RESTful services to AWS infrastructure.

Conclusion

Creating RESTful API with a serverless framework is pretty straightforward. For serverless, we have to switch our development workflow. I found that lots of companies are moving towards creating and managing micro-services architecture instead of the monolithic app. That's sound great.

Closing Note

Thanks for reading. I hope you like this article feel free to like, comment or share this article with your friends. For more depth understanding of serverless framework checkout official documentation and blog of serverless.com.

Code splitting in React

Sagar — Sun, 07 Oct 2018 18:39:13 +0000

Hi, I'm Sagar working as a senior software engineer. I love to write articles which will help developers to understand the magic of JavaScript. If you have any questions about the article, leave a comment and I'll get back to you, or find me on twitter @sagar_dev44.

In the JavaScript eco-system, there are excellent libraries and framework available on the package manager registry and in day to day life we are importing it into our project. That's okay when you have just started your project but as soon as your project grows your facing a lot of performance related issues.

In this article, we are going to focusing on common issues like a large bundle size slow startup and resolving it simply implement code splitting in React app.

Bundling

Mostly modern apps are "bundled" down to single file by using Webpack or Browserify. Bundling codebase is the excellent way until your app is pretty small with limited dependencies. As soon as your codebase grows, your bundle size will grow too and then problems happening started like a large bundle size, slow startup, and slow hot module replacement etc.

If your curious about how bundling works, I strongly recommanded you to read official documentation of webpack.

Code Splitting

The perfect solution for handling a large bundle size and slow startup is to implement code splitting in you're app i.e. split your code into smaller chunks which can then be loaded on demand or in parallel.

Best practice is to keep your chunks size under 150KB, so that the app becomes more interactive within 3–5 seconds, even on poor networks.

The significant benefit of creating apps with Create React App, Next.js, or Gatsby, because they provide code splitting setup out of the box or you can set up by yourself.

If you want to setup code splitting by yourself see the Installation and Getting Started guides on the Webpack docs.

`import()` – dynamically import ES modules

The best way to start introducing code splitting into your app is through the dynamic import(). It enables us to dynamic loading of ES modules. By default, ES modules are completely static. You must specify what you import and export at compile-time and you can’t change it at runtime.

import CONSTANTS from './constants/someFile.js'; // importing CONSTANTS from someFile.js by using es import

ES modules have few limitations like es module should only appear at the top level of a file means if we mention any statement above es module import it will throw an error and another is that a module path is fixed we can't compute or dynamically alter it.

For example,

const double = (x) => x*x;
import CONSTANTS from './constants/someFile.js'; // it will throw an error because we created double function above es import module

On the other side, both es module limitations have overcome by dynamic import() es module and also provides asynchronous module importing feature.

const modulePath = './someFile.js'; // path of module
// dynamic import() module
import(modulePath).then(module => {
  return module.default; // return default function of es module
});

With dynamic import() we can specify the es module path or we can alter path in runtime and it returns a promise and we have to handle this promise in .then() method or .catch() method if it throws an error.

Note that, the dynamic import() syntax is an ECMAScript (JavaScript) proposal not currently part of the language standard. It is expected to be accepted in the near future.

There is two way of implementing code splitting in your app as route-based or component-based code splitting. You have to decide where in your app to introduce code splitting can be a bit tricky.

Route based code splitting

A good place to start code splitting is with app routes. Break down an application into chunks per route, and then load that chunk when user navigate that route. Under the hood, webpack takes care of creating chunks and serve chunks to the user on demand.

We have to just create asyncComponent and import the desired component by using dynamic import() function.

Let's create an asyncComponent component which takes the desired component through dynamic import() return a promise for a component. After component promise has been successfully resolved then it returns the desired component. In simple word, dynamic import() imports component asynchronously.

// filename: asyncComponent.jsx
import React, { Component } from "react";

const asyncComponent = (getComponent) => {
  // return AsyncComponent class component
  return class AsyncComponent extends Component {
    static Component = null;
    state = {
      Component: AsyncComponent.Component // first time similar to static Component = null
    };

    componentWillMount() {
      if (!this.state.Component) {
        // if this.state.Component is true value then getComponent promise resolve with .then() method
        // For simplicity, I haven't caught an error, but you can catch any errors or show loading bar or animation to user etc.
        getComponent().then(({ default: Component }) => {
          AsyncComponent.Component = Component;
          this.setState({ Component }); // update this.state.Component
        });
      }
    }

    render() {
      const { Component } = this.state; // destructing Component from this.state
      if (Component) {
        // if Component is truthy value then return Component with props
        return <Component {...this.props} />;
      }
      return null;
    }
  };
};

export default asyncComponent;

We are doing a few things here:

The asyncComponent function takes getComponent as an argument that when called will dynamically import() function a given component.
On componentWillMount, we simply resolve promise with .then() method and then mutate this.state.Component state to the dynamically loaded component.
Finally, In render() method we are returning loaded component from this.state.Component with props.

Now, it's time to use asyncComponent. Start with separating routes of an app with react-router-app.

// filename: index.js
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import asyncComponent from "./asyncComponent";

// import components with asyncComponent (indirectly using dynamic import() function)
const App = asyncComponent(() => import("./App"));
const About = asyncComponent(() => import("./About"));
const PageNotFound = asyncComponent(() => import("./PageNotFound"));

ReactDOM.render(
  <Router>
    <Switch>
      <Route path="/" component={App} exact />
      <Route path="/about" component={About} exact />
      <Route component={PageNotFound} />
    </Switch>
  </Router>,
  document.getElementById("root")
);

If you run yarn run build with an app created by Create React App, you’ll see our app has been split into several chunks.

# Before implementing code splitting

File sizes after gzip:

  38.35 KB  build/static/js/1.3122c931.chunk.js
  797 B     build/static/js/main.70854436.chunk.js
  763 B     build/static/js/runtime~main.229c360f.js
  511 B     build/static/css/main.a5142c58.chunk.css

# After implementing code splitting

File sizes after gzip:

  38.33 KB  build/static/js/5.51b1e576.chunk.js
  1.42 KB   build/static/js/runtime~main.572d9e91.js
  799 B     build/static/js/main.3dd161f3.chunk.js
  518 B     build/static/js/1.5f724402.chunk.js
  327 B     build/static/css/1.f90c729a.chunk.css
  275 B     build/static/css/main.6a5df30c.chunk.css
  224 B     build/static/js/2.4a4c0b1e.chunk.js
  224 B     build/static/js/3.76306a45.chunk.js

If you clearly observed chunks size, except two or three chunks remaining all chunks size are below than 100KB.

Don't overthink about asyncComponent coding stuff later we will introduce a React-Loadable library which gives us a flexible apis for achieving code splitting.

Component-based code splitting

As we saw earlier, route based code splitting is pretty straightforward where we break down chunks as app route.

If your specific route is too complex where the massive use of UI components, models, tabs etc. and has chunk size goes bigger then standard chunk size like 150KB. In such a scenario we have to move one step forward for splitting code on basis of components also called as component based code splitting.

// filename: App.jsx
import React, { Component } from "react";
import asyncComponent from "./asyncComponent"; // imported asyncComponent

// simple class based App component
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      Greeting: null // <== initially set to null
    };
  }

  // handle button clicks
  handleButtonClick = () => {
    if (!this.state.Greeting) {
      // load Greeting component with dynamic import
      const Greeting = asyncComponent(() => import("./Greeting"));
      this.setState(prevState => {
        return {
          Greeting
        };
      });
    }
  };

  render() {
    const { Greeting } = this.state; // grab Greeting component from state
    return (
      <React.Fragment>
        <button onClick={this.handleButtonClick}>Click me</button>
        {Greeting && <Greeting message="lorem ipsum dummy message" />}
      </React.Fragment>
    );
  }
}

export default App;

We are doing a few things here:

We have created a simple <App /> class component with a button.
In <App /> component, on button click we are dynamically importing <Greeting/> component and stored inside this.state.Greeting state.
In render() method, firstly we destructuring Greeting from this.state and stored in a Greeting constant. Later with logical && (AND) operator, we cross-checking that it's not null value. Once Greeting is truth value then we are utilizing <Greeting /> component directly into jsx.
Behind the scene, Webpack create separate chunk for <Greeting /> component and serve to the user on demand.

React Loadable

React Loadable is a small library designed by @jamiebuilds, that makes extremely easy to implement code splitting in React apps. It accomplishes code splitting by using dynamic import() and Webpack.

React Loadable provides Loadable higher order component which lets you dynamically load any module before rendering it into your app.

Install react-loadable package into your app by using npm or yarn.

yarn add react-loadable # I'm sticking with yarn for this article.

Implement router based code splitting using React Loadable

React Loadable is pretty straightforward, you haven't required to make any asynchronous component or not required to write complicated setup. Just import Loadable component and provide loader.

// filename: index.js
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Loadable from 'react-loadable';

const Loading = () => <h1>Loading...</h1>; // loading component

// dynamic loading <App />, <About /> and <PageNotFound /> components
// Loadable is higher order components. it takes loader which dynamic import() of desired component
// and loading which component shows during successfully resolving dyanmic import()
const App = Loadable({
  loader: () => import("./App"),
  loading: Loading
});

const About = Loadable({
  loader: () => import("./About"),
  loading: Loading
});

const PageNotFound = Loadable({
  loader: () => import("./PageNotFound"),
  loading: Loading
});

ReactDOM.render(
  <Router>
    <Switch>
      <Route path="/" component={App} exact />
      <Route path="/about" component={About} exact />
      <Route component={PageNotFound} />
    </Switch>
  </Router>,
  document.getElementById("root")
);

Implement component based code splitting using React Loadable

Component based code splitting is as simple as we have already seen in the previous section.

import React, { Component } from "react";
import Loadable from "react-loadable";

const Loading = () => <h1>Loading...</h1>; // loading component

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      Greeting: null
    };
  }

  handleButtonClick = () => {
    if (!this.state.Greeting) {
      // load Greeting component with Loadable component
      const Greeting = Loadable({
        loader: () => import("./Greeting"),
        loading: Loading
      });
      this.setState(prevState => {
        return {
          Greeting
        };
      });
    }
  };

  render() {
    const { Greeting } = this.state; // grab Greeting component from state
    return (
      <React.Fragment>
        <button onClick={this.handleButtonClick}>Click me</button>
        {Greeting && <Greeting message="lorem ipsum dummy message" />}
      </React.Fragment>
    );
  }
}

export default App;

I hope you have enjoyed this article. If your curious or want to explore more in code splitting I have provided great references for you.

You have done code splitting in React. Now, It's party time.

References:

Reactive Programming in JavaScript with RxJS.

Sagar — Sun, 30 Sep 2018 10:01:36 +0000

RxJS is JavaScript library for transforming, composing and querying asynchronous streams of data. RxJS can be used both in the browser or in the server-side using Node.js.

I took a challenge to explain RxJS to developers in a simplistic way. The hardest part of the learning RxJS is “Thinking in Reactively".

Think of RxJS as “LoDash” for handling asynchronous events.

So, What Exactly, Reactive Programming is?

Reactive programming is a programming paradigm for writing code, mainly concerned with asynchronous data streams. Just a different way of building software applications which will "react" to changes that happen instead of the typical way of writing software where we explicitly write code (aka "imperative" programming) to handle those changes.

Stream

A stream is a sequence of ongoing events ordered in time. It can be anything like user inputs, button clicks or data structures. You can listen to a stream and react to it accordingly. You can use functions to combine, filter or map streams.

Stream emit three things during its timeline, a value, an error, and complete signal. We have to catch this asynchronous event and execute functions accordingly.

Both promise and observables are built to solve problems around async (to avoid “callback hell”).

Types of async operations in modern web applications

DOM Events- (mouse events, touch events, keyboard events, form events etc)
Animations - (CSS Transitions and Animations, requestAnimationFrame etc)
AJAX
WebSockets
SSE - Server-Sent Events
Alternative inputs (voice, joystick etc)

If you're still confused, don't worry, this normally doesn't make much sense at this point. Let's dive in step by step.

Observable

An Observable is just a function, with a few special characteristics. It takes in an “observer” (an object with “next”, “error” and “complete” methods on it), and returns cancellation logic.
Observables provide support for passing messages between publishers and subscribers in your application.
Observables offer significant benefits over other techniques for event handling, asynchronous programming, and handling multiple values.
Observables are lazy. It doesn't start producing data untill you subscribe to it.
subscribe() returns a subscription, on which a consumer can be call unsubscribe() to cancel the subscription and tear donw the producer.
RxJS offers a number of functions that can be used to create new observables. These functions can simplify the process of creating observables from things such as events, timers, promises, and so on. For example:

    const button = document.querySelector("button");
    const observer = {
      next: function(value) {
        console.log(value);
      },
      error: function(err) {
        console.error(err);
      },
      complete: function() {
        console.log("Completed");
      }
    };

    // Create an Observable from event
    const observable = Rx.Observable.fromEvent(button, "click");
    // Subscribe to begin listening for async result
    observable.subscribe(observer);

Subscription

An Observable instance begins publishing values only when someone subscribes to it. You subscribe by calling the subscribe() method of the instance, passing an observer object to receive the notifications.
A Subscription has one important method, unsubscribe(), that takes no argument and just disposes of the resource held by the subscription.

    const button = document.querySelector("button");
    const observable = Rx.Observable.fromEvent(button, "click");
    const subscription = observable.subscribe(event => console.log(event));
    // Later:
    // This cancels the ongoing Observable execution which
    // was started by calling subscribe with an Observer.
    subscription.unsubscribe();

Observer

An observer is object literal with next(), error() and complete() functions. In the above example, the observer is the object literal we pass into our .subscribe() method.
When an Observable produces values, it then informs the observer, by calling .next() method when a new value was successfully captured and .error() when an error occurred.
When we subscribe to an Observable, it will keep passing values to an observer until the complete signal.
Example of an observer.

    // observer is just object literal with next(), error() and complete() functions
    // Howerver, next() function is required, remaining error() and complete() functions are optional 
    const observer = {
      next: function(value) {
        console.log(value);
      },
      error: function(err) {
        console.error(err);
      },
      complete: function() {
        console.log("Completed");
      }
    };

Operators

Operators are functions that build on the Observables foundation to enable sophisticated manipulation of collections.
An Operator is essentially a pure function which takes one Observable as input and generates another Observable as output.
There are operators for different purposes, and they may be categorized as creation, transformation, filtering, combination, multicasting, error handling, utility etc.
Operators pass each value from one operator to the next before proceeding to the next value in the set. This is different from array operators (map and filter) which will process the entire array at each step.
For example,

    const observable = Rx.Observable.of(1, 2, 3).map(value => value * value);

    observable.subscribe(x => console.log(x));
    // Output:
    // 1
    // 4
    // 9

RxJS provides many operators, but only a handful are used frequently. For a list of operators and usage samples, visit the RxJS API Documentation.

Subject

RxJS Subject is a special type of Observable that allows values to be multicasted to many Observers. While plain Observables are unicast (each subscribed Observer owns an independent execution of the Observable), Subjects are multicast.
A subject in RxJS is a special hybrid that can act as both an Observable and an Observer at the same time.
In the example below, we have two Observers attached to a Subject, and we feed some values to the Subject:

    const subject = new Rx.Subject();

    subject.subscribe({
      next: v => console.log("observerA: " + v)
    });
    subject.subscribe({
      next: v => console.log("observerB: " + v)
    });

    subject.next(1);
    subject.next(2);

    // output
    // observerA: 1
    // observerB: 1
    // observerA: 2
    // observerB: 2

Observable vs Promise

For better understanding, we're going to compare and contrast the ES6 Promise API to the Observable library RxJS. We will see how similar Promises and Observables are as well as how they differ and why we would want to use Observables over promises in certain situations.

Single value vs multiple values

If you make a request through the promise and wait for a response. You can be sure that there won’t be multiple responses to the same request. You can create a Promise, which resolves with some value.
Promise is always resolved with the first value passed to the resolve function and ignores further calls to it.
On the contrary, Observables allow you to resolve multiple values until we call observer.complete() function.

Example of Promise and Observable.

// creating demoPromise using ES6 Promise API
const demoPromise = new Promise((resolve, reject) => {
  asyncOperation((err, value) => {
    if (err) {
      reject(err); // error occured. We will catch error inside chain .catch()
    } else {
      resolve(value); // value received. we will get value inside .then() chain method
    }
  });
});

// creating a demoObservable using Rxjs.Observable API
const demoObservable = Rx.Observable.create(observer => {
  asyncOperation((err, value) => {
    if (err) {
      observer.error(err); // instead of reject(err)
    } else {
      observer.next(value); // instead of resolve(value)
      observer.complete(); // optional. once your async task finished then call observer.complete()
    }
  });
});

Eager vs lazy

Promises are eager by design meaning that a promise will start doing whatever task you give it as soon as the promise constructor is invoked.
Observables are lazy. Observable constructor gets called only when someone actually subscribes to an Observable means nothing happens until you subscribe to it.
Examples,

    // demoPromise started emmiting values but still we have not call .then() method on promise
    const demoPromise = new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log('emmit value');
        resolve(100);
      }, 3000);
    });

    // demoObservable not started emmiting values unitll we subscribe to it.
    const demoObservable = new Observable(observer => {
      setInterval(() => {
        if (err) {
          observer.error('DemoError throw'); // instead of reject(err)
        } else {
          observer.next('value'); // instead of resolve(value)
          observer.complete(); // optional. once your async task finished then call observer.complete()
        }
      });
    });

Not cancellable vs cancellable

One of the first things new promise users often wonder about is how to cancel a promise. ES6 promises do not support cancellation yet. It is, the reality of the matter is cancellation is really an important scenario in client-side programming.
Use a third party library like a bluebird or axios they offer promise cancellation feature.
Observable support cancellation of asynchronous task by calling unsubscribe() method on Observable.
When you subscribe to an Observable, you get back a Subscription, which represents the ongoing execution. Just call unsubscribe() to cancel the execution.
Example of cancellable observable

    const observable = Rx.Observable.from([10, 20, 30]);
    const subscription = observable.subscribe(x => console.log(x));
    // Later:
    subscription.unsubscribe(); // its will stop ongoing execution

Practical Examples

Creating observables from values

  const observable = Rx.Observable.of("foo", 98, false, ["john", "doe"], {
    age: 19,
    gender: "male"
  });

  observable.subscribe(val => console.log(val));

Creating Observables from stream of values

  const observable = Rx.Observable.create( observer => {
    observer.next('Hello');
    observer.next('Its monday morning!!');
  });

  observable.subscribe(value => console.log(value));
  // output:
  // Hello
  // It's monday morning

Observable from DOM Events

    const button = document.querySelector('button');
    const observable = Rx.Observable.fromEvent(button, 'click');
    observable.subscribe(event => console.log(event));

Observable from Promise

  const promise = new Promise((resolve, reject) => {
    asyncOperation((err, value) => {
      if (err) {
        reject(err);
      } else {
        resolve(value);
      }
    });
  });

  const Observable = Rx.Observable.fromPromise(promise);

  Observable.subscribe(value => console.log(value));

Observable from Timer method

  const timer = Rx.Observable.timer(3000);

  timer.subscribe(() => console.log("timeout!!"));

Observable from Interval

  const interval = Rx.Observable.interval(3000);

  interval.subscribe(tick => console.log(`${tick} tick`));

Map operator

  const observable = Rx.Observable.from(2, 4, 6, 8);

  observable.map(value => value * value).subscribe(result => console.log(result));

Do Operator

    const dogs = Rx.Observable.of("Buddy", "Charlie", "Cooper", "Rocky");

    // do operator used for debugging purpose
    dogs
      .do(dog => console.log(dog))
      .filter(dog => dog === "Cooper")
      .do(dog => console.log(dog))
      .subscribe(dog => console.log(dog));

Debounce and Throttle

Debounce - Wait X time, then give me the last value.
Throttle - Give me the first value, then wait X time.

    const input = document.querySelector("input");
    const observable = Rx.Observable.fromEvent(input, "keyup");

    observable.debounceTime(3000).subscribe(event => console.log(event));

    observable.throttleTime(1000).subscribe(event => console.log(event));

bufferTime - Collects values from the past as an array, and emits those arrays periodically in time.

      const clicks = Rx.Observable.fromEvent(document, "click");
      const buffered = clicks.bufferTime(1000);
      buffered.subscribe(x => console.log(x));

Conclusion

The promise is the best fit for AJAX operations where Observables are extremely powerful for handling asynchronous tasks. Observables provide a bunch of operators for creating, transforming, filtering and multicasting asynchronous events. Sounds great, doesn’t it? :D

Closing Note

Thanks for reading. I hope you like this article feel free to like, comment or share this article with your friends. For more depth understanding of RxJS checkout provided reference links.

References

Three dots ( … ) in JavaScript

Sagar — Sat, 15 Sep 2018 17:44:16 +0000

Hey! I'm Sagar. I love to write tutorials and articles to help developers better understand the magic of JavaScript. If you have any questions about the article, leave a comment and I'll get back to you, or find me on twitter @sagar_codes.

In this article, we are going to discuss a feature introduced in ES6 that is spread operator and rest operator. 🔥 🔥 🔥

I've become a big fan of the three dots that may change your style of solving the problem within JavaScript. We can use three dots … in two different ways as spread operator and rest operator.

Rest Parameters 😴

With rest parameters, we can gather any number of arguments into an array and do what we want with them. Rest parameters have been introduced to reduce the boilerplate code that was induced by the arguments. 🙌

function myFunc(a, b, ...args) {
 console.log(a); // 22
 console.log(b); // 98
 console.log(args); // [43, 3, 26]
};
myFunc(22, 98, 43, 3, 26);

In myFunc's last parameter prefixed with … which will cause to all remaining arguments placed within the javascript array.

The rest parameters gather all remaining arguments so there is no sense 😕 to add rest parameters before the last parameter. Rest parameter must be the last formal parameter.

function myFunc(arg1, ...rest, arg2) {
  // arg2 ?
}

Rest parameters can be destructured (arrays only), that means that their data can be unpacked into distinct variables.

function myFunc(...[x, y, z]) {
  return x * y* z;
}

myFunc(1)          // NaN
myFunc(1, 2, 3)    // 6
myFunc(1, 2, 3, 4) // 6 (fourth parameter is not destructured)

Spread Operators ✨

The spread operator is used to expand elements of an iterable (like an array) into places where multiple elements can fit.

function myFunc(x, y, ...params) { // used rest operator here
  console.log(x);
  console.log(y);
  console.log(params);
}

var inputs = ["a", "b", "c", "d", "e", "f"];
myFunc(...inputs); // used spread operator here
// "a"
// "b"
// ["c", "d", "e", "f"]

There have always been a variety of ways to combine arrays, but the spread operator gives use a new method for combining arrays:

const featured = ['Deep Dish', 'Pepperoni', 'Hawaiian'];
const specialty = ['Meatzza', 'Spicy Mama', 'Margherita'];

const pizzas = [...featured, 'veg pizza', ...specialty];

console.log(pizzas); // 'Deep Dish', 'Pepperoni', 'Hawaiian', 'veg pizza', 'Meatzza', 'Spicy Mama', 'Margherita'

With spread operator, Shallow-cloning (excluding prototype) or merging of objects is now possible using a shorter syntax than Object.assign().

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
// Object { foo: "bar", x: 42 }

var mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }

👉 Conclusion

When we see three dots (…) in the code, it's either rest parameters or the spread operator.

There's an easy way to distinguish between them:

When three dots (…) is at the end of function parameters, it's "rest parameters" and gathers the rest of the list of arguments into an array.
When three dots (…) occurs in a function call or alike, it's called a "spread operator" and expands an array into a list.

Thanks for reading. I hope you like this article feel free to like, comment or share this article with your friends.

😄 Happy Coding…

Implement a serverless CI/CD pipeline with AWS (Amazon Web Services).

Sagar — Sat, 15 Sep 2018 06:41:27 +0000

This article series focused on implementing a serverless CI/CD with AWS services, During the implementation process we are going introduce lots of new AWS services. Due to topic complexity, the article has been divided into 2 parts. Your reading first part of the article where we will implementing Continuous Integration (CodeBuild Project, CodePipeline and test case with jest).

To follow the steps mentioned in this article, you should have your own AWS free tier account.

What should you know before starting implementing this article series?

Basic understanding of git workflow.
We are implementing CI/CD with CodeBuild, CodePipeline, S3, and Serverless Framework etc. So you have required a good knowledge of this AWS services.
If you stuck in between process, you're curiosity help you to get rid of the obstacle.

If you don't know about AWS services, I will try to explain to you as simple as possible.

Let's jump into understanding CI/CD

What is Continuous Integration (CI) / Continuous Delivery (CD)?

Continuous Integration(CI) is a development and testing phase of the software development. As developers make changes to software code, these changes are immediately checked into a shared source code. When the code is checked in, automated build processes and tests are triggered to make sure that the changes did not break the software application. It helps us to caught coding errors more quickly, and this avoids bugs before code merges into the shared source code.

Continuous Delivery (CD) means that as coding changes, new feature or bug fixes passes the automated build tests, then we have to do a set of configuration before ship changes to users land and deliver it rapidly as possible.

In this article, we are going to create a weight watcher application which asks for weight on every day and we store storing this weight inside the database.

We are going to create a new repository at GitHub. Give a name weight-watchers to the repository and feel free to skip description then hit on Create Repository Button. After the successful creation weight-watchers repository, we are ready to clone this repository to the local machine for writing magical code. Clone repository using SSH or HTTP method as per your convenience.

If you stuck with cloning repository hit this link help you

git clone git@github.com:sagar-gavhane/weight-watchers.git

For sake of simplicity, we are using GitHub. If you want to use CodeCommit feel free to create a repository on AWS CodeCommit and clone it.

What is AWS CodeCommit?

AWS CodeCommit is a version control service hosted by Amazon Web Services that you can use to privately store and manage source code in the cloud. We can state that it's alternative to GitHub only difference is that you can't make your repository public. CodeCommit has great integration with CodeBuild and CodePipeline over other version control services.

Add necessary files and packages to project

Add .gitignore file to ignore tracking folders and files which are generated at run-time or some secret files to avoid uploading to the repository. Paste the raw content of https://www.gitignore.io/api/node to created .gitignore file.

touch .gitignore && gedit .gitignore

Let's create a package.json file using npm init command.

npm init --y

We are using express-js for creating API endpoints. Install project dependencies by hitting npm below command.

npm install aws-sdk body-parser express serverless-http --save

Okay, wait for a while let me quickly explain project dependencies.

aws-sdk- The aws-sdk provides an API for AWS services you can use to build applications. The API lets developers build libraries or applications that make use of AWS services. There are different aws-sdk for different languages, we are using aws-sdk for JavaScript.

body-parser - body-parser extract the entire body portion of an incoming request stream and exposes it on req.body. Means whatever we send data using post method are stored inside req.body.

express - Express is a light-weight web application framework to help organize your web application into an MVC architecture on the server side. We are using for creating API endpoints.

serverless-http - serverless-http module allows you to 'wrap' your express API for serverless use. It's not handling any HTTP server, ports or sockets.

One more step, Let's add a buildspec.yml file to our project, create a file with name buildspec.yml and add below code snippets. Later, I will explain to you the role of the buildspec file in the CI/CD pipeline.

buildspec.yml

version: 0.2
phases:
  install:
    commands:
      - npm install
      - npm test

It's a good time to commit changes to the repository. Move on to next section of creating a solid CI/CD pipeline.

git add . && git commit -m "initial commit"

git push origin master

Settings S3 bucket (Simple Storage Service)

Amazon S3 is object storage built to store and retrieve any amount of data from anywhere. Before we start to creating pipeline we have to setup S3 bucket to store our build artifacts. Build artifacts are files outputted from our builds that we want to save for future use.

Goto to AWS console and select S3 service from services dropdown, Click Create bucket and enter a name for your bucket. Here, I’m using weight-watchers-artifacts. So I’ve appended -artifacts to S3 bucket to make my bucket easier to find. S3 bucket name is unique so you have to enter suffix random numbers. Choose a region and click Next. Set default settings to S3 bucket as it is.

I strongly recommended that, stick with one region during this article. I'm sticking with US East (N. Virginia) region and also checkout necessary services are available to the your selected region.

Configure AWS CodeBuild project

AWS CodeBuild is a continuous integration service that compiles source code, runs tests, and produces software packages that are ready to deploy. We have just required to create CodeBuild project with proper settings.

Find CodeBuild service from services dropdown, once you're on CodeBuild dashboard hit on create project button. For the naming convention, I have given a name weight-watchers-builder to the project. Choose source provider to GitHub (If you're using CodeCommit then choose CodeCommit). It will prompt you for GitHub authentication, authenticate your GitHub account. Enter your repository complete URL, I entered https://github.com/sagar-gavhane/weight-watchers repository URL. In Source: What to build section skip remaining settings as default.

Move onto Environment: How to build section. There is two way of selecting a building environment, either you can use AWS CodeBuild image or specific docker image. I'm sticking with AWS CodeBuild image. I have chosen an operating system as Ubuntu with runtime environment as nodejs, with specific runtime version to aws/codebuild/nodejs:8.11.0.

Build specification, We will use buildspec.yml file which is located in the root of the repository. Right now just select Use the buildspec.yml in the source code root directory and buildspec name to buildspec.yml.

If you know building setting then feel free to toggle settings as per your requirements.

Now, it’s time to tell our CodeBuild project to save artifacts in that S3 bucket we created. Artifacts: Where to put the artifacts from this build project section select type as Amazon S3 and set name, the path to empty. Bucket name, I will choose weight-watchers-artifacts and artifacts packaging to zip.

And remaining settings: Cache, Service Role, and VPC. We don’t need to do anything with Cache and VPC for this article.

Move over to Service role section, In this section, we will need an IAM service role when your build runs, it will assume this role. This service role will give it permissions to do write logs to CloudWatch and write artifacts to S3. Choose create a service role in your account it will create a service role for us. I have given role name to codebuild-weight-watchers-builder-service-role.

Okay, we don't need to change any advanced settings. Hit on continue button to review what we have built so far.

Congratulations!! You have successfully created a CodeBuild project. Take a break, I know sticking with this article until this point is hard but step by step we will improve our knowledge and skills.

Configure CodePipeline

AWS CodePipeline is a continuous delivery service that helps us to rapidly and reliably deliver features and updates. You can define your release process workflow and describes how a new code change progresses through your release process.

A pipeline comprises a series of stages (e.g., build, test, and deploy). each stage is made up of a sequence of actions, which are tasks such as building code or deploying to test environments.

Enough theory!!. Let's focus on creating our own pipeline. select CodePipeline from services dropdown. CodePipeline creation divided into 6 steps as Name, Source, Build, Deploy, Service Role, Review.

In Name step, enter your pipeline name, for a naming convention, I will choose pipeline name as weight-watchers-pipeline then hit next step button.

In Source step, Choose source provider as GitHub repository (If your created repository on CodeCommit then select CodeCommit). It will prompt you for GitHub authentication. Authenticate your GitHub account. Once you successfully authenticate then you're ready to enter repository name and branch name. I will go with the repository name http://github.com/sagar-gavhane/weight-watchers and branch name as master. Skip Change detection options section. then move onto the next step.

In Build step, choose the build provider that you want to use, I'm sticking with CodeBuild. Move onto Configure your project section, select your project builder name. We already created a project builder in starting of this article so, I will choose weight-watchers-builder then move to the next step.

In Deploy step, choose deployment to provide as No Deployment. Later we will edit our pipeline and add one deployment stage. move to the next step.

In Service Role step, Our pipeline needs a role that gives permission for access CodeBuild project, watching CloudWatch events. Now, we're selecting ready-made service role AWS-CodePipeline-Service. However, if that selected your custom role and role is not configured correctly, AWS CodePipeline might not work as expected.

Finish, you have done CodePipeline configuration, just given quick review on the pipeline and then hit create pipeline button.

Congratulations!! your pipeline successfully created.

Configure the testing environment with Jest.

Jest is a delightful JavaScript testing framework created and maintained by a community of open source contributors and Facebook employees.

Write a simple unit test for check given number is prime or not using a jestjs. In __test__ directory create a file named primeNumber.test.js and copy paste below code snippets. In code snippets, we wrote a function which returns true if the given number is prime else return false.

Before writing code, install jestjs as a development dependency.

npm install jest --save-dev

primeNumber.test.js

function isPrime(num) {
  for (var i = 2; i < num; i++) if (num % i === 0) return false;
  return num !== 1;
}

describe("test prime number", () => {
  it("17 is a prime number", () => {
    expect(isPrime(17)).toBe(true);
  });
});

Make little changes to our package.json file add the script as "test": "jest" in script section. We have to run npm test command during CodeBuild execution.

"scripts": {
  "test": "jest"
},`

Okay! Whatever you have done modification with weight-watcher project in local machine, commit your changes to GitHub and check release change in weight-watchers-pipeline pipeline. If your both phase successfully passed you're created your own CI pipeline.

Thanks for reading this article, I understood that maybe you're stuck with the problem or you have a good suggestion for this article. Don't forget to like and comment on your question or feedback.

In the next article, we will implement CD (Continues Delivery) so keep in touch with me. Have a good day!!

Happy Coding...

DEV Community: Sagar

Level Up Your Sprints: How I'm Using AI to Plan Like a Boss

My One-Month Journey with the Cursor Editor: An Honest Review

The Awkward First Week

The "Aha!" Moment: It's a Canvas, Not Just an Editor

The Good, The Bad, and The AI

What I Loved:

What I Missed (The Frustrations):

The Verdict: Front-end vs. Back-end

So, Am I Switching Back?

Exploring Bolt.new: A Promising Tool for Quick Prototyping

The Appeal of Bolt.new

Where Bolt.new Faces Challenges

Future Use Cases and Considerations

Conclusion

Building Resilient APIs: Mistakes I Made and How I Overcame Them

Mistake 1: Ignoring Timeout Configurations

Mistake 2: Not Implementing Circuit Breakers

Mistake 3: Weak Error Handling

Mistake 4: Neglecting Rate Limiting

Mistake 5: Overlooking Observability

Takeaways

How to Capture Screenshots with Puppeteer

Introduction

What is Puppeteer.

Installation

Capture a GitHub Profile Screenshot

Capture Multiple Screenshots

Conclusion

References

How to build a blog with Next.js

In this blog post

Why I choose Next.js over Gatsby?

Project setup

App structure

Create blog content

What is getStaticProps() method?

What is getStaticPaths() method?

Conclusion

Reference Links

React Performance Optimization

#1 Avoid passing unnecessary props to children components

#2 Common fixing scenarios for object & function props

#3 React.memo with react-fast-compare

Build a RESTful API with the Serverless Framework

Serverless Framework

Prerequisites

Dependencies

App structure

Writing the handler function

Deployment

Conclusion

Closing Note

Code splitting in React

Bundling

Code Splitting

import() – dynamically import ES modules

Route based code splitting

Component-based code splitting

React Loadable

References:

Reactive Programming in JavaScript with RxJS.

Stream

Observable

Subscription

Observer

Operators

Subject

Observable vs Promise

Practical Examples

Three dots ( … ) in JavaScript

Rest Parameters 😴

Spread Operators ✨

👉 Conclusion

Implement a serverless CI/CD pipeline with AWS (Amazon Web Services).

Let's jump into understanding CI/CD

What is Continuous Integration (CI) / Continuous Delivery (CD)?

What is AWS CodeCommit?

Add necessary files and packages to project

Settings S3 bucket (Simple Storage Service)

What is `getStaticProps()` method?

What is `getStaticPaths()` method?

`import()` – dynamically import ES modules