10 Libraries You Should Know as a React Developer

-
Image
 Being a modern React developer is not about knowing just React itself. To stay competitive, it is highly recommended to explore the whole ecosystem In this article I've compiled some of the most useful React component libraries that you could use to speed up your developer workflow. Those will include anything from working with forms, charts, calendars, tables, guides, popups, colors, animations, music, images and so much more. 1. react-hook-form React Hooks for form state management and validation. 2. recharts Redefined chart library built with React and D3. 3. react-big-calendar An events calendar built for React and modern browsers. 4. react-beautiful-dnd Beautiful and accessible drag and drop for lists with React. 5. react-table A library for building powerful tables and data grids. 6. react-joyride Create guided tours for your apps. 7. react-advanced-cropper Create customized crops for your designs. 8. react-colorful A tiny, dependency-free, fast and accessible color picker c...
Post a Comment

AWS Amplify

-

Welcome to the very first blog on devbrewery blogs. In this blog, we will be focusing on AWS Amplify and how we can use amplify to deploy a react frontend application. 




Agenda for this blog -

Introduction to AWS amplify.

Use cases of AWS amplify.

How to use amplify resources for app building.

Shipping and deploying on amplifying.


What is AWS Amplify?

AWS amplify is a set of tools and services which lets mobile and frontend developers build secure and full-stack applications powered by AWS.


Need for AWS Amplify?

To understand the need for AWS Amplify let me provide you with a hypothetical scenario.

Suppose you are a frontend developer and you have a brilliant app idea and you want to implement it, but the app requires a backend and you don't have the time or in the worst case don't know how to write backend code. So in such situations, AWS amplify will come as a savior. You can create your own frontend or use certain tools offered by amplifying itself to create your frontend and for the backend, part amplify will handle everything. Using certain amply tools you can have your backend up and running with a whole lot of advanced features. Then simply connect your front-end with the back-end and boom you have your application. 

So as a frontend developer amplify can make your work much easier.


Why use AWS Amplify?

1. Using amplify you can create anything, from static websites to complex web and mobile frontend to a full stack application.

2. Frontend - Firstly you can build frontends from a basic static HTML site to a complex frontend application. You can use amplify Studio which is a visual development environment using which you can build beautiful UI with minimal coding. You can implement a lot of other features like, authentication, data storage, email verification, social media signup/sign-in, forgot password, multi-factor authentication workflow, etc.

3. You can Build a Powerful Backend - Use Amplify Libraries and Amplify CLI to create a cross-platform backend for your web or mobile app with real-time and offline functionality in a few clicks. 

4. Connect your application with other AWS services like S3 storage, Cognito, etc in a few lines of code.

5. Use AWS amplify to build, deploy, and host static websites, single-page web apps, and server-side rendered apps in just a few clicks via amazons content delivery network (CDN), with custom domains, site monitoring, and more.


Who uses AWS amplify?

Frontend teams — from startups to medium and large-sized enterprises use amplify to grow their business. Some of the major players are - 

1. Amazon Music - it is Amazon's own music streaming platform.

2. Neiman Marcus - it is a prestigious chain of departmental stores in the US.

3. Orangetheory - it is a fitness studio franchise.

4. Credit Genie - it is a popular personal finance app.


How to use Amplify as a developer?

How to build your application from both frontends to the backend. 


Frontend

To create your front-end you can use anything you want, use can use HTML, JS, React, Flutter, Swift, etc. Amplify offers a number of integrations. These are all the integrations offered by Amplify - Javascript, React, React Native, angular, Vue, Next Js, Android, IOS, Iconic, and Flutter.

To make your frontend task easier you can use amplify studio which offers pre-built components and you can easily integrate and customize it according to your choice.


Here I would also like to tell you about various tools offered by AWS amplify to ease your development

  1. Amplify libraries - Amplify has libraries for all of its supported integrations. For example, there is Amplify UI react library for prebuild UI components, here is the homepage of Amplify UI react library, similarly you have libraries for also integrations also. Similarly, there are a number of other open source libraries which will help to connect your app to new or existing AWS services e.g Cognito or S3.

  2. Amplify Studio - Visual development environment to accelerate full-stack development.

  3. Amplify CLI - Configure an app backend with a guided CLI workflow.

  4. Amplify Hosting - Fully managed web hosting with full-stack CI/CD.


Backend

Use amplify CLI or studio to create a backend, there are a number of features that you can add to your backend.


Like authentication, storage, Restful and GraphQL APIs, Analytics, Push Notification, Maps, and even ML/AI models.


Connecting Frontend with Backend

Use amplify libraries or amplify studio to connect your app with the new or existing AWS backend.



Lastly, let's see how you can

Ship your application

Now I will walk you through a demo of deploying a react frontend on Amplify.


1st step is to connect your repository from any of the below-mentioned code hosting platforms. 

You can import your code from GitHub, Bitbucket, GitLab, and AWS Codecommit, or you can also deploy without a git provider. 


2nd step - Give permission to your account

3rd step - Login to your account

4th step - select repo

5th step - configure your build setting, here amplify has provided with default build setting and it's okay.

6th step - save and deploy

Now amplify will do all the background stuff and all we have to do is wait for it to get deployed.


7th step - verify your deployment


Also, we have to set environment variables for our application. Let's do that.




Comments

Post a Comment

Popular posts from this blog

Javascript Fetch API

-
Image
Being a developer it is very important to know how to make API calls. hence in this blog we will discuss about Javascript Fetch API which is very commonly used to make API calls. What is Fetch API and why to use it ? The Fetch API provides a JavaScript interface for accessing and manipulating parts of the protocol, such as requests and responses. It also provides a global fetch() method that provides an easy, logical way to fetch resources asynchronously across the network. This kind of functionality was previously achieved using XMLHttpRequest. Fetch provides a better alternative that can be easily used by other technologies such as Service Workers. Fetch also provides a single logical place to define other HTTP-related concepts such as CORS and extensions to HTTP. The fetch specification differs from jQuery.ajax() in the following significant ways: The Promise returned from fetch() won't reject on HTTP error status even if the response is an HTTP 404 or 500. Instead, as soon as t...
Read more

Amazon Elastic Compute Cloud (Amazon EC2)

-
Image
In this blog, we will cover all the basics of AWS EC2 which you all should know in order to start using AWS EC2. Compute services are the backbone that powers most web-based applications. Amazon Elastic Compute Cloud (Amazon EC2) is the foundation that many other Amazon Web Services (AWS) offerings are built upon. Amazon EC2 offers over 500 instance types. You can choose the latest processor, storage, networking, and operating system to help you match the needs of your workload. Because there are so many options and customizations to choose it becomes difficult to decide an instance type and configuration for their application workloads. Instance types An EC2 instance is a virtual machine (VM) that runs in the AWS Cloud. When you launch an instance, you decide on the virtual hardware configuration by choosing an instance type. The instance type that you choose determines the hardware of the host computer used for your instance. Each instance type offers different compute, memory, and s...
Read more

Setting up Node JS project with ESLint and Preetier

-
Image
Welcome back to yet another blog of Devbrewery. In this blog, we will see how we can set up a Node JS project with ESLint and Prettier. Why are Automated Lint and Code Style Important? ESLint  performs automated scans of your JavaScript files for common syntax and style errors. Prettier  scans your files for style issues and automatically reformats your code to ensure consistent rules are being followed for indentation, spacing, semicolons, single quotes vs double quotes, etc. We use them on our teams because: They keep everybody on the same page , following the same rules. They save time in code reviews because we can safely ignore all style issues, and focus on things that actually matter, like the structure and semantics of our code. They catch errors . Prettier, not so much, but ESLint actually catches a lot of syntax errors and simple forms of type errors, such as undefined variables. Setting these things up is a one-time cost , but the time-saving benefits compound over ...
Read more