DEV Community: Pushkar Thakur

Everything New In React 18

Pushkar Thakur — Tue, 15 Jun 2021 15:22:58 +0000

React 18 Alpha is here there are many things that got added in react 18 as react 17 there really wasn't much added But it's definitely not a case with react 18 In this article we will look at some of the top updates.

What's new?

1.The New Root API :

Here’s what we’re used to seeing

ReactDOM.render(<App/>, document.getElementById(“root”))

We pass reactDOM.render our App component and then document.getElementById and our root element. So we’re rendering our app component into our root element on the page pretty simple.

Here’s the new way

Const root = ReactDOM.createRoot(document.getElementById(“root”))
root.render(<App />)

We have a root variable which is equal to the new method called create root. This is being passed our root element and then we call root.render and pass our app component.

Our app component it’s accomplishing the same thing but in a different way. The old way called the legacy root API and it’s still going to work in react 18 but will be deprecated at some point by using the new root API you’re going to get access to all of the react 18 improvements including the concurrent features that we’re going to talk about in this article.

2. Suspense :

In this update we’re going to get full support for suspense. Now what is suspense as the name implies it suspends something until it’s ready to be rendered.

<Suspense fallback={<h1>Loading….</h1>}>
   <ComponentFetchingData /> 
   <AnotherComponent />
</Suspense>

In this example we have a component that needs time to fetch data before it’s ready to be rendered suspense will use the fallback until the data is returned and the components are rendered.

It's important to note here that the random component here is not waiting on data but it’s still going to be suspended until everything inside the suspense is ready to be rendered.

Now suspense is going to be extremely useful with server side rendering currently with ssr you’re going to get fully rendered html but your browser still has to load the javascript and hydrate the entire page before it can become interactive suspense could speed up this load time dramatically using the example from the react 18.

<Layout>
   <NavBar />
   <Sidebar />
   <RightPane>
        <Post />
        <Suspense fallback={<Spinner />}>
    <Comment />
        </Suspense>
   </RightPane>
<Layout />

Above we have a page loading a navbar, a sidebar, a post and a comment. Now we really don’t need the comments to load before the site becomes interactive so we’re going to suspend the comments so that the viewer can start reading the article and then we’ll load the comments in the background.

3. Automatic Batching :

In react 17 and earlier react with batch re-render updates during a browser event like a click.

React 17 will not batch the re-renders if you need to fetch data and then update the state. With react 18 if you use the new create root API all state updates will automatically be batched no matter when they happen.

If there is some critical component you don’t want to batch. You can opt out of this using ReactDOM.flushSync().

4. startTransition API :

This is a new API introduced with this release, which helps in keeping the current webpage responsive and being able to do heavy non-blocking UI updates at the same time.

This will tell react which updates are urgent and which can wait this will help the UI remain responsive.

For urgent updates like typing, hover, clicking, we call props/functions usually like this :

setText(input)

For non-urgent or heavy UI updates, we can wrap it in a startTransition API as :

startTransition(() => {

  setText(input);
});

5. Suspense List :

A <SuspenseList /> takes in revealOrder prop with values forward, backward or together

<SuspenseList revealOrder="forwards">
  <Suspense fallback={<LoadingSpinner />}>
    <CardComponent id={1} />
  </Suspense>
  <Suspense fallback={<LoadingSpinner />}>
    <CardComponent id={2} />
  </Suspense>
 </SuspenseList>

Here the card component will be revealed in a forward direction(until the data is fetched, will fell back to LoadingSpinner Component). Similarly, backwards will reveal Cards in reverse order, and together prop will render everything "together".

6. useDeferredValue

const deferredValue = useDeferredValue(value, { timeoutMs: 2000 });

useDeferredValue takes in the state value and a timeout in ms and Returns a deferred version of the value that may “lag behind” it for at most timeoutMs.

This is commonly used to keep the interface responsive when you have something that renders immediately based on user input and something that needs to wait for a data fetch.

We can install React 18 and reactDOM right away using:

npm install react@alpha reactDOM@alpha

Wrapping Up

React 18 is an alpha release right now and not suitable for production but it is always better to start learing about these features now.

React 18 will go into public beta in a few months.

Thank You for reading. Signing off 🙌.

Feel free to reach out 👇

GitHub: https://github.com/Push9828
Twitter: https://twitter.com/PushkarThakur28
LinkedIn: www.linkedin.com/in/pushkarthakur28

Serverless on AWS

Pushkar Thakur — Sun, 28 Mar 2021 14:18:34 +0000

In recent years, the serverless computing model has emerged as a disruptive architectural approach for developing modern apps, utilities, and backend solutions. It helps developers to focus on code rather than spending time in the configuration, managing, or scaling of backend infrastructure.

What is serverless

Serverless allows you to build and run applications without giving a thought about the server. The provisioning, administration, and scaling of the application server are all managed dynamically by the Serverless cloud provider.

There are two types of serverless computing models. The first type refers to web and mobile application which leverage the cloud services for managing the server-side logic. It is known as Backend-as-a-service(BaaS).

The second type is Function-as-a-service(FaaS). In FaaS handling backend infrastructure such as containers, runtime environments.

Why use serverless

No server management: Left the worries of provision or maintain any servers.
Flexible scaling: Your application will scale automatically.
Pay for value: Pay only for what you use rather than paying for the server unit.

An overview of Serverless AWS services

AWS has more than 165 services that cover the major aspects and requirements of backend development like computing resources, security, Machine learning, messaging and monitoring services, databases of specific needs, and many more.

Compute

With AWS Lambda you can run code virtually any type of application or backend service - all with zero administration. You can execute code as a function triggers by various events like file update in S3 bucket, request on AWS API Gateway, operations on Dynamo DB table. AWS Lambda is a FaaS solution. You can combine Lambda with many other services of AWS and used it in many scenarios, like real-time file processing in S3, real-time stream processing, to handle the HTTP requests from API in mobile and web applications

With AWS Fargate you can run containers without having to manage servers and clusters. Fargate improves security through application isolation by design. You don’t need to optimize the server utilization, manage cluster scheduling. Fargate provides rich observability of applications with the help of Amazon CloudWatch Container Insights. To launch your application
Specify the CPU and memory requirements, define network and IAM policies.

Messaging

Amazon Simple Queue Service(SQS) is a fully managed message queuing service that enables you to decouple and scale microservices, distributed systems, and serverless applications. Get started with SQS in minutes using the AWS console, Command Line Interface or SDK of your choice, and three simple commands.

SQS offers two types of message queues. Standard queues offer maximum throughput, best-effort ordering, and at-least-once delivery, and FIFO queues are designed to guarantee that messages are processed exactly once, in the exact order that they are sent.

Amazon Simple Notification Service (SNS) is a fully managed messaging service for both application-to-application (A2A) and application-to-person (A2P) communication.

With the help of SNS, you can send messages directly to millions of users. Besides the push notification, you can deliver notifications by email, SMS, or HTTP endpoint.

Integration

Amazon API Gateway is a fully managed service for creating, publishing, maintaining, monitoring, and secure APIs at any scale. You can create RESTful APIs and WebSocket APIs that enable real-time communication applications with the help of API Gateway.

API Gateway provides powerful, flexible authentication mechanisms, such as AWS Identity and Access Management policies, Lambda approver functions, and Amazon Cognito user pools.

With AWS Step Function you can orchestrate the sequence of AWS Lamdba functions and multiple AWS services into business-critical applications. Step Functions is based on a state machine. A task is a state in a workflow that represents the single component of the application.
All tasks are automatically triggered, tracked, and retried if an error came up. So that application executes smoothly.

Security

Amazon Cognito is a fully managed and cost-efficient sign-up/sign-in service, which provides users authentication, authorization, and management for web and mobile applications. The two main components of Amazon Cognito are user pools and identity pools. User pools are user directories that provide sign-up and sign-in options for your app users. Identity pools enable you to grant your users access to other AWS services. You can use identity pools and user pools separately or together.

With Amazon Cognito, users can sign in through social identity providers such as Google, Facebook and through enterprise identity providers such as SAML and OpenID Connet.

AWS Key Management Service (KMS) is a fully-managed service that allows you to create and manage cryptographic keys and control their use across your application and AWS services. AWS KMS is integrated with most other AWS services that encrypt your data for security. AWS KMS customer master keys (CMKs) controls access to data encryption.

By using AWS KMS, you gain more control over access to data you encrypt. You can use the key management and encryption feature directly in your application.

Monitoring

Amazon CloudWatch is a monitoring and observability service built for DevOps engineers, developers, site reliability engineers (SREs), and IT managers. CloudWatch provides the matrics about every AWS service you use. You will get the data and actionable insights to monitor your applications, respond to system-wide performance changes, optimize resource utilization and operational health.

Amazon QuickSight is a scalable, serverless, embeddable, machine learning-powered business intelligence (BI) service built for the cloud. QuickSight provides AWS data, third-party data, big data, spreadsheet data, SaaS data, B2B data, and more on a single dashboard. You can embed it with your applications, portals, or websites to receive your own self-service analytics.

Database

Amazon DynamoDB is a fully managed NoSQL database that supports key-value and document structure. DynamoDB lets you offload the administrative burdens of operating and scaling so that you don't have to worry about hardware provisioning, setup, and configuration, replication, software patching, or cluster scaling. It has single-digit millisecond latency. DynamoDB is a great choice for many serverless applications on AWS. It goes hand in hand with other AWS services.

Amazon Aurora is a fully managed relational database engine that's compatible with MySQL and PostgreSQL. Amazon Aurora is up to five times faster than standard MySQL databases and three times faster than standard PostgreSQL databases. It automates and standardizes database clustering and replication which are the most challenging aspects of the database. Aurora is also available in an on-demand autoscaling configuration which is called Amazon Aurora Serverless.

Analytics

Amazon Kinesis is a fully managed and data stream service to collect and process large streams of data records in real-time. With Amazon Kinesis, you can ingest real-time data such as video, audio, application logs, website clickstreams, and IoT telemetry data for machine learning, analytics, and other applications.

Amazon Athena is an interactive query service with the help of standard SQL it analyzes data directly in Amazon Simple Storage Service(Amazon S3). there is no infrastructure to set up or manage, and you pay only for the queries you run. Athena can run queries in parallel so results are fast even with a large dataset.

Conclusion

AWS provides many services which can be used for building applications with any workload. Developers and solution architects have a huge range of tools to implement backend applications in an effective way. Important aspects like high availability, automatic scalability, security, and durability are built-in. With the pay-as-you-use pricing model, the upfront cost is zero and there is no binding. Which makes serverless architectures very cost-effective.

Thank you for reading. Signing off 🙌.

Feel free to reach out 👇

GitHub: https://github.com/Push9828
Twitter: https://twitter.com/PushkarThakur28
LinkedIn: www.linkedin.com/in/pushkarthakur28

What is AWS Amplify

Pushkar Thakur — Wed, 24 Mar 2021 05:45:34 +0000

Amazon Web Services is leading platform in the cloud universe. Back at re:invent 2018, Amazon had unveiled a range of products for mobile, web, IoT, databases, and more.

AWS has many services that cover all needs from a small enterprise to big enterprise business use cases. One such service is AWS Amplify.

AWS Amplify is a set of tools and services to provide a declarative interface for client developers who want to perform everyday tasks in a scalable and secure way using cloud services. It provides users with the flexibility to select the platform they are most comfortable building with and is especially beneficial when it comes to front-end development.

What does it offer?

Amazon Amplify framework is a library, command-line interface, UI component that allows the creation of frontend and its integration with backend lot smoother. Ultimately, it provides full layer development without having to worry about iterations and backend configurations. Here are some features from the many

Authentication: Amplify auth lets you set up user authentication flow with user directory. It provides pre-built UI components too.
Data Store: With the help of UI you can define backend models, fields, and the relationship between the objects. Authorization rules are built-in in the data model.
Atomic Deployments: It offers fully managed services for hosting static web applications and deploying with a built-in CI/CD workflow that helps to accelerate the application release cycle.

Benefits of using Amplify

Easy and UI driven Development: It provides a simple fast and modern UI-driven approach to build web and mobile applications. You get some UI components out-of-the-box that speed up the development cycle.
Backend Support: It improves the app performance by offering built-in backend support.
Usage-Based Payment: Like other paid services of AWS. The payment model is very cost-efficient as you only pay for the services you use.
It’s Free to Start: It has a very impressive free tier. You can use it for your initial projects or side projects.
Web-Based Analytics: It comes with an analytics dashboard it is very useful for developers, designers, and project managers. It offers in-app metrics too.

AWS amplify supports iOS, Android, Web, and React Native mobile apps, and React, Ionic, Angular, and vue.js for web apps.

The AWS amplify is great for those who don't want to build their backend or other components from scratch. amplify components make it easy to set up the building blocks of your app on your own without all the legwork.

Use Cases of AWS Amplify

Here are just a few of them. If you have more in mind feel free to add in comment.

When you want to build cloud-connected applications on the web and mobile platforms.
When you want to use javascript in mobile app development.
When you don't want to enter into the hassle of maintaining servers and backend service.
When you want scalability and faster app development.
When you want to give more with cloud in your existing app.

How much it cost?

AWS Amplify comes with the following price structure:

Easy and UI driven Development: It provides a simple fast and modern UI-driven approach to build web and mobile applications. You get some UI components out-of-the-box that speed up the development cycle.
Backend Support: It improves the app performance by offering built-in backend support.
Usage-Based Payment: Like other paid services of AWS. The payment model is very cost-efficient as you only pay for the services you use.
It’s Free to Start: It has a very impressive free tier. You can use it for your initial projects or side projects.
Web-Based Analytics: It comes with an analytics dashboard it is very useful for developers, designers, and project managers. It offers in-app metrics too.

AWS amplify supports iOS, Android, Web, and React Native mobile apps, and React, Ionic, Angular, and vue.js for web apps.

How much it cost?

AWS Amplify comes with the following price structure:

Free Tier: It is one of the first payment methods which can also be called a trial period of 12 months(with certain limitations).
Pay As you Go Model: For build/deploy it’s $0.01 per build minute, $0.023 per GB of storage per month, and $0.15 for every GB served.

Conclusion

Mobile and web developers could not have asked much from AWS Amplify. As it is packed with so many built-in features such as authentication, notifications, and APIs can all be made with a minimum amount of work.

If you want to deploy secure and efficient applications quickly without managing the underlying infrastructure, give AWS a chance - you won't be disappointed!

Thank You for reading. Signing off 🙌.

Feel free to reach out 👇

GitHub: https://github.com/Push9828
Twitter: https://twitter.com/PushkarThakur28
LinkedIn: www.linkedin.com/in/pushkarthakur28

Flex of flexbox

Pushkar Thakur — Wed, 03 Feb 2021 05:15:08 +0000

The way you represent the content on your website or on the company website tells almost everything about your product or whatever the website is representing. It doesn’t matter even if you have great content but if that’s not displayed in a proper way then it doesn't serve the purpose of the existing content. So, showing content in a user-friendly way is very important.

From the early days of browsers, CSS is playing a significant role in web development and we are improving ourselves along with the regular updates coming to CSS and web. It is getting simpler and more efficient to provide new experiences on web pages.

Now let's jump to the main topic, we have two CSS layout systems - Flexbox and CSS Grid. I personally prefer using both of them to unlock the full potential of CSS. In this article, we will dive in and discuss flexbox. And at the end, we will see how to use CSS Grid and flexbox together and create amazing user experiences and improve the look and feel of the web applications.

The basic thing while getting started with the flexbox is you need a flex container, which will work as a parent container in which we will be setting the basic structure of display, using Set display: flex.

.container{
display:flex; /* or inline flex */
}

Note: CSS columns have no effect on a flex container.

Flex Direction

The default direction of flex is a row

change direction by flex-direction:column

.container{
 flex-direction: row | row-reverse | column | column-reverse;
}

Flex-Wrap

Flex items try to fix in one line but you can change that behavior.

.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap(default): All items will be on one line.
wrap: Items will go on the next line from top to bottom.
wrap-reverse: Items will go on the next line from bottom to top.

Justify Content

This property helps us to align objects along the main axis. It gives more control over the alignment when items overflow the line.

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
}

flex-start(default): Items are towards the start of the container.
flex-end: Items are towards the end of the container.
center: Items are center along the line.
space-between: Items are evenly distributed. The first item will at the start and the last item at the end.
space-around: Items get equal face around them. Note that when you look at it space is not equal. The first item will have 1unit space from the container but from the next item, it will be 2units. 1unit from itself and 1unit of the next item.
space-evenly: Items are distributed in such a way that they equal space for each.

Align-Items

This is the version of justify-content along with the cross axis;

.container {
  align-items: stretch | flex-start | flex-end | center | baseline
}

stretch(default): stretch to fill the container still it follows min-width/max-width rule.
flex-start: Items are placed at the start of the cross-axis.
flex-end: Items are placed at the end of the cross-axis.
center: Items are centered in the cross-axis.
baseline: Items are aligned such as their baselines align.

Now here is one question that might pop in your head, like mine did when I first learn about it. Which is better to use CSS Grid or Flexbox?

It depends if you have a small design to implement, let's say you just need to align an element in a viewport, then you can go with the flexbox. You can go with CSS Grid whenever you have complex layouts, overlapping elements to handle, and so on.

Here is a resource from scotch that will help you to visualize it better.

Conclusion

We learned about the flexbox use cases, where and how to use them effectively. I personally prefer CSS grid and flexbox. CSS grid for outer layout and for inside flexbox that’s it!

You can check the project

Thank You for reading. Signing off 🙌

Feel free to reach out 👇

GitHub: https://github.com/Push9828
Twitter: https://twitter.com/PushkarThakur28
LinkedIn: www.linkedin.com/in/pushkarthakur28