We are excited to announce our long-waited and requested feature that takes our apps to the next level. We’ve developed and integrated advanced user role management that improves operational efficiency and user experience while enhancing security measures.

This feature lets you customize access for each user based on their role, improving efficiency, user experience, and security.

So now, you as an admin of the application, may define what parts of the system are accessible by other user roles.

How it works?

Firstly, you need to sign in to our platform and create a new application. Please follow the standard app creation process.

Next, on step 2 select Next.js/Tailwind stack. At the moment the roles and permissions feature is only available for this particular stack!

The next step in the process is to design a schema for your application. The Roles and Permissions are turned on by default. You will immediately see 3 entities in your schema: users, roles, and permissions. They are built-in system entities. Furthermore, roles and permissions are automatically set up for user entities. If you don’t need the Roles and Permissions entities, simply click on the 3 dots next to the Add Entity button and deselect Roles and Permissions. 

Next, you can connect your GitHub and push your application code there. Or skip this step by clicking the Finish and Deploy button and in a few minutes, your application will be generated.

The generated app comes with a built-in Super Admin user admin@flatlogic.com

Roles

As a Super Admin, you can see the Roles and Permissions sections in the app. There you can create custom permissions for your application and assign them to specific roles as needed.

Next, go to the roles pages. Roles page contains all roles present in the application. By default roles are: Administrator and User. Administrator has all permissions, and hence able to do whatever they want. User by default has all permissions, except those needed to manage roles, permissions, and users. You can try logging in with Admin and User to see the difference.

Permissions

As an Administrator, you can also go to the list of permissions.

In the Permissions table, you can see the default CRUD permissions. For a user to access certain parts of the app, they need to have specific permission. A list of auto-generated permissions includes:

• CREATE_<ENTITY>, to add new entries.
• READ_<ENTITY>, to retrieve, search, or view existing entries.
• DELETE_<ENTITY>, to deactivate, or remove existing entries
• UPDATE_<ENTITY>, to edit existing entries.

Custom Permissions

You can also assign custom permissions to the specific user. To view the permissions assigned to individual users, navigate to the user table, select the user you want to review, and click the eye icon. This action displays all user-related settings. To assign custom permissions to a specific user, go into user edit mode and select the desired permissions in the Custom Permissions section. Now this user has custom permissions, besides standard ones assigned via their role.

Code 

In our ongoing efforts to ensure data security and enhance user accessibility, we have implemented a permissions middleware. This feature manages access on both the front-end – the part of the website that users interact with directly – and the back-end, where data is stored and handled.
This middleware is all about managing access to certain features or data of a website, or in tech terminology, “user permissions”. Essentially, it’s like a website security guard checking if a user has the right ‘pass’ to perform certain tasks or access certain information.

In our Back-end, user permissions act like ‘passes’ to access certain areas or perform specific tasks. When users interact with the data, a specific ‘pass’ or permission is required.

• The system checks if a user carries the necessary pass. If not, it moves along to inspect their assigned role – think ‘Administrator’ or ‘User.’ The ‘Administrator’ role comes with broader passes, allowing the Admin User to venture where other users can’t.

• Missions relating to database actions like creating, reading, updating, or deleting data get special treatment. Here, the system closely examines the user’s request, maps it to the respective database action, and thoroughly checks if the user holds a proper ‘pass’ to carry it out.

Here is the example of a permission check, for each route, performed on the backend, in this case, it will be “/categories”:

router.use(checkCrudPermissions('categories'));

On the Front-end side we are checking if a specific user has a certain permission, be it one permission or a set of permissions.

• If the user doesn’t have a role assigned to them, the function immediately returns `false`, meaning the user doesn’t have permission.
• We are creating a set – a collection of distinct items – of permission names that the user has, combining their custom permissions and the permissions included in their role.
• If the `permission_name` input is a single string, it checks whether this permission is in the set of permissions the user has, or if the user is an Administrator. If either condition is true, the function returns `true`.
• If the `permission_name` input is an array (meaning multiple permissions are required), the function checks if the user has at least one of these permissions in their set of permissions and if so, it returns `true`.

Here is an example of a permission check performed on front-end:

Every page is enclosed by the LayoutAuthenticated component, to which we pass our permission as a property:

CategoriesTablesPage.getLayout = function getLayout(page: ReactElement) {
  return (
    <LayoutAuthenticated permission={'READ CATEGORIES'}>
     {page}
    </LayoutAuthenticated>
  );
};

So this page is going to be accessible only if the user has READ_CATEGORIES permission.

Here is an example of how, within the LayoutAuthenticated component, we check if a user has permission to access a particular page. Method hasPermission is general and can be used anywhere:

useEffect (() => {
  if (!permission || !currentUser) return;
  if (!hasPermission (currentUser, permission)) router.push('/error');
}, [currentUser, permission]);

Summing Up

This new feature moves generated apps event closer to our ultimate goal of being able to generate custom web apps fully and without coding. Now, you have more control over who has access to what in your system, making your operations even more effective and secure. We will also release a video tutorial about using our new feature soon, so don’t miss it!

Flatlogic is here to assist with any queries or help needed. If you face any difficulties setting up this feature reach out to us via our support channels.

About Flatlogic

Flatlogic is an AI-powered platform designed to rapidly build enterprise-grade business applications. With over 250 hours of development time saved, we build full-stack web applications tailored to your business needs. Our platform also provides dozens of professionally designed, customizable templates for rapid deployment. Designed to streamline business operations and data-driven decision-making, Flatlogic combines powerful technology with user-friendly design for efficient application development. From startups to large enterprises, our feature-rich platform and customizable templates meet unique needs and provide a cost-effective, highly accurate, and reliable solution for your application development needs.

The post Introducing Roles and Permissions-Based Access Control for Applications appeared first on Flatlogic Blog.

“A successful web application must have a strong foundation in both UX design and user interface,” states Brad Frost, emphasizing the critical role of choosing the right technology framework. Bootstrap and Material-UI stand out as leading contenders in the user interface domain, offering developers streamlined paths to deploying visually appealing and functional web applications. The dilemma of choosing between these two, or venturing for an alternative, highlights the significance of making an informed decision that aligns with your project’s goals—especially crucial in the realm of business software, where the choice can significantly impact user experience and operational efficiency.

By reading this article to the end, you’ll learn the pros and cons of each framework, which popular websites are currently using each one, and which one is the ideal choice for your project. So, if you’re on the fence about Bootstrap vs. Material-UI, let’s dive right into the details!

A short comparison for those who are looking for a quick answer

Bootstrap vs Material: A Detailed Comparison 

Common Information

Bootstrap stands as a formidable trio of CSS, HTML, and JavaScript, designed to facilitate the development of responsive web applications. Reigning as the most utilized framework for both mobile and desktop app creation, its origins trace back to Twitter, where it was initially crafted as an internal tool dubbed Twitter Blueprint. Launched into the open-source domain on August 19, 2011, Bootstrap’s primary aim was to simplify the development process while promoting uniformity across internal applications. This framework has proven its worth by underpinning major applications such as Airbnb, Dropbox, Apple Music, Twitter, Coursera, and Bloomberg, showcasing its versatility and strength in supporting business software development across a diverse array of industries.

In Flatlogic we create web & mobile application templates built with React, Vue, Angular and React Native to help you develop web & mobile apps faster. Go and check it out yourself!
See our themes!

Material UI is a React UI framework that follows the principles of Material design. It is based on Facebook’s React framework and contains components that are made according to Material guidelines. Material design was developed by Google in 2014 while Material UI was developed by a small, dedicated, and passionate team in 2017. The first beta version of the Material UI on GitHub came out on June 23 in 2017. The first running version dates from 2018 according to the official website. Material UI is strongly connected with Material design, but you shouldn’t confuse the two. Material UI is just a react component library without Material design, that’s why we built our comparison from the perspective of the fact that Material guidelines go first, Material framework follows. Google uses Material Design in all its products, Material UI is used by Nasa, Amazon, Unity, JPMorgan, etc. 

Bootstrap vs Material: the Grid System

Bootstrap grid is a flexible and fully responsive mobile-first grid system that uses containers, rows and columns to help the app adapt to any screen. Rows and columns merge to create 1 or more containers. The bootstrap grid system is a twelve-column system that has a range of rules to follow. For example, rows can serve to create columns, there must be no content inside the row, only columns can be immediate children of rows, and others (read more here).

Material Designs’ responsive UI is based on twelve columns grid layout. Column width is flexible, while gutter widths that form the space between content are fixed values in the range between 0 and 10px. Margin widths that separate the content from the left and right screen borders are also defined as fixed values. Gutter and margin widths can be either equal or not. Grid system adopts when the screen size reaches some predetermined values, or “breakpoints”. When that happens, the layout adjusts to the screen and changes the number of columns where the app places its content. This provides developers and users with a fully responsive UI. 

Information Layout

Bootstrap is a system of organizing and presenting information. And we put a major emphasis on the word “information” because apps like Twitter, Coursera, and Apple music have minimalistic designs with soft colors, bold and big headlines, little or no animation. People visit these websites not to enjoy fancy buttons or smooth and bright animation, but to get information as fast and easy as possible. Bootstrap offers that opportunity with a minimum amount of distractions and provides a clear and readable UI.  

Check out React Material UI Admin Node.js!

PostgreSQL integrated. No jQuery or Bootstrap!

Material design was primarily made for mobile development. Mobiles have smaller screens and, as a result, less space to place elements and information – the solution from Material UI is animation, layers, sliders, pop-ups. Mobiles don’t have a pointer, but users need to understand where they touch on a touch screen – here animated feedback of touch from the app goes. Immediate feedback is necessary for mobiles, but for what reason can you use all this click-get-feedback animation for the web? Animation makes the user experience better and looks cool indeed, but if you use some app daily (for example, for work) this nice-looking smooth animation can be overwhelming. It’s quite easy to make the app look incredible with Material UI, but a nice-looking design doesn’t always meet the users’ needs.

Dependencies

Bootstrap is not a simple framework. The package contains tons of features and a big code with a lot of scripts, a large number of CSS classes, and jQuery dependency. This leads to problems with performance, the huge size of the app, battery draining, page speed. It’s possible to avoid the consequences of the Bootstrap framework if you devote time and get rid of components you don’t plan to use in your app. Then you will get a lightweight working app. Don’t forget that removing the largest client-side dependency isn’t a fast task to accomplish. More than a year has passed since that announcement, and the release date was in early 2020 first, now we’re expecting to see it somewhere in late 2020.

Material UI is a set of React-based components. Components can work independently from each other, which means you have in your app only styles for components that the app uses.  Material UI is pure CSS and doesn’t require any library to work. You get only what you need and want to use. 

Customization

From the perspective of customization, we can compare Bootstrap and Material UI as consistency vs uniqueness. Why so?

As we have mentioned in the first paragraph, Bootstraps’ developers wanted to provide consistency in the experience both for developers and users. To be honest, they have succeeded. If you look at several dozen apps that are based on Bootstrap, you will see the same things in the same places with little differences. Material UI is based on Material guidelines. Material guidelines are rules and principles for motion, interaction, animation, building navigation, typography, shapes, colors, etc. You shouldn’t follow them all, you must instead combine them, and don’t forget that your design must fit the content it displays so the user experience becomes better.

But there is no one-size-fits-all solution for every web app, there is a set of rules (Material guidelines) that helps a designer to create a modern and stylish interface that will be unique. That leads us to the problem, when we use 100s different UIs and every time we open a new app created by a Material design dedicated designer, we meet a situation like “Erm… Where am I supposed to click?” There is no consistency of experience, but there is a space for creativity. 

The Speed of Development

As we mentioned before, Bootstrap goes with many UI components, like typography, tables, buttons, navigation, labels, alerts, tabs, etc. It provides enough necessary elements to build a good-looking design with modest efforts and allows developers to concentrate on the functionality of the app. Furthermore, there are a lot of themes and templates to download on the web. That results in high development speed.  

Material UI provides developers with material-based UI components. They help save some time on design and app development. But since Material UI is mostly a set of UI components, it doesn’t offer such a great boost to the development speed as Bootstrap does. If you want to improve development speed significantly, it’s better to use material templates.

Bootstrap vs Material: What if I want to use both? 

Is it possible to take advantage of them both and enjoy stylish responsive design without a lot of time spent adopting the app for different resolutions?

Yes, it’s possible with Material Design bootstrap (also known as MDBootstrap). It is a set of libraries built on top of Bootstrap and other popular frameworks like Vue, Angular, React and follows Material design guidelines. That combo allows Web developers to use close-to-bootstrap syntax that everybody is familiar with, so there will be fewer problems while developing. A list of MDBootstrap for different frameworks can be found here.

This is not know-how, MDBootstrap goes with a large number of tutorials, free and premium templates, a friendly community, and a long history (almost since that day when Material Design has gone from being an idea to the real guidelines). Try it, maybe you’ll like Bootstrap AND Material more than Bootstrap vs Material.

That’s all. Thanks for reading. 

Bonus: Create your Material-UI or Bootstrap app with Flatlogic’s Full Stack Web App Platform

Most web applications follow the CRUD pattern. CRUD stands for Create, Read, Update, Delete. These are the four actions an application can perform. And should we take a closer look at any application, we’ll see that each of its operations is one of the four or a combination of two of them. Just like we can categorize an application’s functions, we can create parts and components and then combine them into a myriad of combinations to suit just about any demand.

At Flatlogic we have built a development platform that simplifies the creation of web applications – we call it the Flatlogic Platform. The tool allows you to create the CRUD app in minutes, you just need to choose the stack, design, and define the database model with help of an online interface and that is all. Moreover, you can preview generated code, push it to your GitHub repo and get the generated REST API docs. Try it for free!

Here is a quick guide on how to do a full-stack web app based on Material-UI with help of Flatlogic Platform.

Step №1. Choose your project name

Any good story starts with a title, any good React App starts with a name. So, summon all of your wit and creativity and write your project’s name into the fill-in bar in Flatlogic Platform.

Step №2. Select your React Material-UI App Stack

In this step, you will need to choose the frontend, backend, and database stack of your app. Also, to correlate with our illustrative React App, we will choose here React for the frontend, Node.js for the back-end, and PostgreSQL for the database.

Step №3. Choose your React App Design

As we’ve already mentioned, design is quite important. Choose any from a number of colorful, visually pleasing, and, most importantly, extremely convenient designs Flatlogic’s Full Stack Web App Platform offers. In this case we’ll choose Material UI.

Step №4. Create your React App Database Schema

You can create a database model using the UI editor. There are options to create custom tables, columns and relationships between them. So basically you can create any type of content. Also, you will receive automatically generated REST API docs for your application.

Step №5. Review and Generate your React App

In the final step, just to make sure everything is as you want it to be, you can review all of the previously made decisions, check the Connect GIT Repository box if you want to, and click the “Finish” button.

After a short time to generate, you will have at your fingertips a beautiful and fully functional web App. Voila! Nice and easy!

Try it for free!

You might also like these articles:

• Top 20+ Bootstrap Dashboard Templates to Use Absolutely for Free
• 20+ React Developer Tools to Increase Your Programming Productivity
• Angular vs React: Which One to Choose for Your Web App

The post Bootstrap vs. Material-UI. Which One to Use for the Next Web App? appeared first on Flatlogic Blog.

Hello again, dear friends and accidental bypassers! Today we would like to discuss the factual difference between two web-developing mainstays – React and Angular. Bear in mind, we don’t want to put the two up against each other. Our goal is to explore the difference between them to highlight the stronger and weaker sides of both. Both Angular and React are exceptionally good and functional. We will collate and find a sort of champion in some categories.

React Overview

When discussing a topic like ours, it is quite mandatory to do it justice and decide which one is better. Look at our little overview of what React is and how it functions.

By React official documentation, React is “a library for building composable user interfaces. It encourages the creation of reusable UI components, which present data that changes over time”. But let’s try to explain it even easier. React is a useful tool that one can use to create all kinds of websites and web apps. It was created by Jordan Walke in 2013 and since then has been an irreplaceable part of many JavaScript front-end developers and contributors. It is flexible, fast, scalable, and powerful, which means a lot in being one of the best tools for creating dynamic and interactive web apps with ease.

Furthermore, React’s developing and ever-growing user base allows for quick and efficient issue solving, as there is always a ton of people, able to contribute their knowledge and advice in the time of need. It is a good choice for those, who only start their work with JavaScript frameworks. But wait, even that’s not all. Since 2015, there has been a little useful addition to the whole matter called React Native, which is used for the creation of native mobile apps. But we are not getting in its depth today, leaving this topic for another time.

Now, let’s take a peek at what features React possess:

There are also some pros and cons worth mentioning when talking about React:

React Pros:

1. React is, as we’ve already mentioned, is pretty easy to learn, making it a good choice for novice front-end developers;
2. React’s syntax is HTML-like, which allows for highly detailed documentation and templating;
3. React support such a useful feature, as server-side rendering;
4. Also, there are a number of versions of React, the transition between them is seamless;
5. There is no frame-specific code when it comes to React, which allows the convenient usage of Javascript.

React Cons:

1. React’s documentation might appear lacking and poor, when compared to other frameworks and libraries;
2. The full view of Model-View-Controller is unavailable, supporting only part-of-MVC view;
3. Also, easy to learn the React itself, JSC might be a concerning barrier for new developers.

All that being said, React also has other limitations, such as being a front-end library, which means covering only the view layer of the app, thus creating a need to use other technologies to complete the full developer tooling set and a slight increase in the learning curve for new developers due to the usage of inline templating and JSX. But, nonetheless, when it comes to creating multiple events apps, as well as creating sharable components for the app, React has few competitors. And that’s not taking into consideration the exceptional convenience in the situations when your app needs personalized solutions.

And now we would like to debunk a couple of misconceptions about React, the first being the mistaken belief that React is a framework. It is simply not, because React is a library. And because of that React mostly focuses on the view layer of the app, helping to make handling it gradually easier, as well as easing its integration into a project much smoother.

Misbelief number two can be summarized as “JSX is mandatory when using React”. It is not even a hard requirement but simply put, there is an ability to use JSX when using React. And we see few reasons not to use it.

The final misconception about React is the belief that React needs Redux for its ecosystem. Yes, it is quite a useful tool, as modern developers quite frequently need to juggle many states between various components, and handling complex apps might become somewhat problematic. That’s where Redux comes into play because it is an open-source JavaScript library and it was created to help in solving such problems. And while being exceptionally handy when used in combination with React, Redux is not the only solution for this kind of problem. There are plenty of state management tools on the market to help you manage React’s state management.

Summarizing, it is ought to be said that React is one of the best open-source front-end JavaScript libraries for user interface development on the market today and, presumably, would hold this position for many years to come.

Angular Overview

Now, let’s have a closer look at the other today’s web-development mainstay – Angular. And, first and foremost, let’s get to know what it is and what it is used for. Angular is a TypeScript-based open-source web application framework. It was created in 2016 by Google and in May of 2021, Angular has got a stable release. This framework is mainly used for client applications creation and is widely used as one of the best tools for single-page applications front-end. It is also one of the oldest (but not worth from it) frameworks on the market today, and, due to terrific support and backing of a humongous number of contributors, Angular is extremely convenient for the knowledgeable, but has a pretty steep learning curve for the new users.

Angular is perfect for any development team that looks ready-to-use full-stack solutions, scalable feature-rich apps, or for creating performance-oriented web solutions.

An important thing to keep in mind is that Angular and AngularJS are not the same. The key differences are as follows:

• Angular uses hierarchy of components as its primary architectural characteristic. AngularJS, on the other hand, uses the concept of “scope” as such;
• Angular and AngularJS’ expression syntax are different, as Angular uses “ [ ] ” for property binding and “ ( ) ” for event binding;
• Angular possesses the ability of dynamic loading, while AngularJS lacks that;
• Angular also possesses the support for Angular Universal, giving it the ability to run apps on servers;
• Due to the recommended use of Microsoft’s TypeScript language, Angular has Static typing (Generics included) and Annotations;
• Much of Angular’s core functionality has moved to modules;
• Angular is able to support asynchronous template compilations.

Now, just as well as with React, let’s take a look at Angular’s pros and cons:

Angular Pros:

1. Angular follows clean code development;
2. It has an interface that reminisces material design;
3. With the help of Angular CLI, the process of updating becomes seamless;
4. Angular is, after all being said, just an exceptional high performing full-stack framework.

Angular Cons:

1. Learning curve might be steep;
2. There is a need of knowing TypeScript and other components that are specific to Angular;
3. Angular’s documentation is not all-inclusive;
4. Despite being a full-stack solution, there still can be situations that will require third party integrations. And these integrations might be complicated;
5. Switching between versions can be challenging.

Overall, Angular uses TypeScript and HTML to build apps. It also comes with such features as Directives, Forms, Pipes, HTTP Services, Dependency Injection, and many-many more, making it a terrific framework for building sophisticated complex web and mobile applications, adapted for every device imaginable.

There are also some misconceptions concerning Agular that we would like to touch upon for some clarification. First of them is the belief that Angular is exclusively a JavaScript Library. This one is not true, as Angular is a framework, rather than a library and it has quite a lot of design patterns, application-like modules, and templates. It also has very responsive support and many more single-page web app designing-oriented elements.

The second misconception about Angular is the belief that apps created with Angular are slower than the ones made on different frameworks. This misconception is mostly perpetrated due to poor execution of the apps, created on Angular, as well as some bad design elements in the core framework. But don’t think that Angular itself has no sins in that regard, as previous versions used to be requested from the server, and modules used to be compiled using JIT, resulting in slower app response times. Now it should also be mentioned that the latest version of Angular has a feature, called AOT (Ahead of Time compilation), which improves app performance in a significant way.

Now let’s get to the third misconception – “Using TypeScript is mandatory with Angular”. This is one of the biggest Angular misconceptions, as TypeScript is not a necessity, but one of Angular’s biggest advantages. And it can be easily replaced with ES5 – JavaScript for app development.

The fourth and last misconception about Angular we would like to discuss here is the belief that Angular lacks State Management and, thus, is not compatible with Redux and Flux. Let us put it this way: as web apps become more and more complicated each and every day state management becomes more and more vital accordingly. And while AngularJS wasn’t very fitting in that regard, the latest Angular framework is, as it is designed to provide devs with options on how to use their libraries more efficiently. And that includes state management libraries, such as Redux and Flux, which are based on unidirectional data flow.

So, we hope you are now persuaded that rivalry-based comparison is not possible in this particular pairing. Both React and Angular are unique in their own ways and are both useful in different situations. Thus, in the following parts of the article, we are going to describe the particular differences between the two and suggest the situations in which each is more fitting.

React’s Unique Features That Angular Lacks

Now we are going to discuss the most interesting part of this whole article – the actual comparison of the two titans.

And first of all, let’s do a quick run through some things React and Angular do have in common:

• One-Way Data Binding. As you might know, data binding is the effort of synchronizing data between UI and logic. One-way data binding in this case refers to the process of binding data from the components to DOM or the other way around, meaning that it is strictly unidirectional. And both Angular and React use one-way data binding (but carry with us, there is going to be a little twist later);
• Component-Based Architecture. Both React and Angular approach building their architectures based on replaceable, independent, substitutable and modular components in order to increase the code’s reusability and simplify the whole process. But there is a difference in the libraries they choose to use, as React is, after all, not a framework, but a library, and, thus, uses such supporting tools as Redux, WebPack, Babel, etc. Angular, on the other hand, is a framework and a full-stack one at that. This means that it has many out-of-the-box possibilities, such as RxJS, Angular CLI, Angular Universal, etc.

Summing this point up, it should be said that while both React and Angular have unique ecosystems, React’s one is easier to understand and much more flexible, but depends on external integrations much more than Angular. The latter, on the other hand, can provide a decent comprehensive solution without the need for any external integrations, but due to its independence from them, it is much less flexible.

• Community Support. Both React and Angular have huge numbers of people using them, creating and sharing templates on them. This can make the actual process of working on your own project much easier, because in case of running into a dead end it is always possible to turn to the community for their help and advice.

Now let’s talk about features that are unique to React and are not possessed by Angular. First of them is the upper-mentioned extreme flexibility. In actuality, the thing that could have been React’s greatest weakness – dependency on third-party extensions – proves to be one of its biggest strengths. By using all sorts of tools with various libraries and architecture for developers to choose from, React can provide you with the possibility to create an impressively customizable app. Angular is lacking in that regard, as it only allows its components to be used with other frameworks. And that’s not mentioning the fact that the dev embeds the code with an HTML application, making delivering real-time updates harder.

The second feature that React has is a very open and welcoming app structure. Angular’s app structure is complicated and fixed, which can be good for experienced devs in its own right. But React’s app structure welcomes all and any, as it gives developers the freedom of choice by following a component-based architecture.

Expanding UI toolset is the third unique feature of React. This feature is the outcome of React’s flexibility, but it should be mentioned nonetheless. Thanks to the community it has, React’s UI toolset expands exponentially, as new tools are developed and tested. Angular’s set of tools for material design components is, on the other hand, fixed and built-in. And as it may make the user interface configuration much faster and easier, it might also restrict the creative flow as you can only work with what you have from the very beginning.

And the fourth React’s unique feature is its superior state management. Don’t get us wrong, we don’t say that Angular’s state management is bad in any way. But thanks to external state management libraries, such as Redux or MobX, for example, React, which is built in a way that every component has its state, allows for swift and convenient state management of every single component, as well as groups of components.

Angular’s Unique Features That React Lacks

Now let’s talk about the features that Angular possesses and React lacks. First of all, as was promised, we take a look at a little twist we were talking about when discussing data binding. Both React and Angular, as we’ve already said, are implementing one-way data binding, but Angular is also capable of two-way data binding. It means that Angular is able to share data between a component class and its template and if data is changed in one place, it will automatically reflate at the other end. For example, if the value of the input box is changed, then it will also update the value of the attached property in a component class.

The second feature that Angular has is the ease and simplicity of updating. As Angular is independent of any third-party components, the updating process is seamless and, in fact, fully automated from the developer’s end of the ordeal. React, on the other hand, has a harder process in that regard, as the third-party components need to be checked upon for updates.

And the third and final feature can be somewhat controversial, as we suggest that Angular’s higher learning curve can be somewhat of a positive feature in itself. Yes, it is harder to understand for an up-and-coming developer, but once mastered it allows for terrific and ever-reliable results.

Recap

As we’ve already established in the opening, both React and Angular are true mastodons of front-end open-source development and, most certainly, will hold on to their high rankings for years to come. But, as with everything in life, they are not ideal and both have plenty of unique features, drawbacks, mixed bags, and blessings in disguise. And it’s up to you to decide which one suits you best, React or Angular. Or, maybe, it is the combination of two that you are able to master.

Flip through some of the related articles to learn more about JavaScript frameworks.

Suggested Articles

• Vue vs React: What is Easier? What is Trending? [Detailed Guide with +/-]
• React vs. React Native. What are the Key Differences and Advantages?
• Top 10 Angular Material Admin Dashboard Templates

The post React vs. Angular: The Diff Between Library & Framework [Comparison Guide] appeared first on Flatlogic Blog.

Bootstrap is the most popular HTML, CSS, and JS framework that is used for building responsive web interfaces. Nowadays, Bootstrap is not only an adaptive grid system but a full-fledged toolkit with components and JS plugins. A part of Flatlogic web templates is made with Bootstrap (check out a Bootstrap dashboard theme). In this article, we will speak about different frameworks that can offer a grid system and look through popular toolkits with components and UI elements.

But first, answer the main question: if Bootstrap is so popular and recognized, why should we use alternatives?  

Finding the right front-end framework from this article can simplify project development, offering alternatives to Bootstrap that might better suit your specific business software needs, whether you’re looking for a comprehensive framework or a toolkit with a pre-built grid system.

If you feel overwhelmed with Bootstrap, or think that it doesn’t fit your programming style, or if development with Bootstrap becomes a headache, you should give a try to another technology. Don’t forget that all frameworks are tools to achieve some specific purposes, so it’s a good practice to clearly define your task before you start looking for instruments to complete it. We are here to help you get acquainted with these instruments that can become viable alternatives for Bootstrap. We divided the top into two blocks: first includes all frameworks and libraries that are built according to Material Design principles, frameworks from the second block doesn’t use Material Design.  
Enjoy reading. 

Twitter Bootstrap Alternatives with Material Design

Material UI

Material UI is a very popular React UI framework that is based on material design principles. It is a crowd-funded JavaScript open-source project with 60 k stars on GitHub. According to the official website, such big global companies, like Amazon, NASA, J.P.Morgan, Unity use Material UI for development. The framework offers a big set of React-based components and has a long release history with the option to download any previous version. Material UI goes with a responsive grid system that provides flexibility with CSS’s Flexible Box module. According to Material Design principles, Material UI focuses on the consistent spacing between columns. By default, the spacing is equal to 8 px, but it varies as an integer between 0 and 10 inclusive.

The additional feature that we should mention: 

Developers used Material UI framework to build premium and free admin templatesand kits so users can either quick start a new project with the help of ready-to-use components in templates or improve current project and redesign it.
Thanks to the crowd-funded principle of the project, the team of developers continue to develop Material UI and support users.

To start using Material UI you can:
Install as npm package

npm install @material-ui/core
yarn add @material-ui/core

Or download from CDN

Vuetify.js

Vuetify.js is another Material Design framework. That is a very popular and loved Vue component library for building awesome web applications. The developers tried their best to decrease the bundle size and to provide wide customization opportunities. The grid system from Vuetify is a 12 point grid system that uses breakpoints to control the layout of the application for different window sizes. Breakpoints can be customized with special Breakpoint service.

Vuetify is also sponsored by anyone who wants to take part in the project development via Patreon and OpenCollective web platforms for donations. The developer community with 27 k stars on GitHub is not as big as Material UI one. However, the whole community is vibrant and active and you can use several channels for communication (twitter, discord, GitHub, Reddit, official Vuetify website support). You can also use premium themes, kits, and dashboard if you need to speed up the development of your project. The last release of a new version of Vuetify was less than a month ago.

Additional features:
Vuetify supports more than 30 languages.  The top developers provide paid consulting services.

To get started you need to download Vue CLI. It’s a specific tool for Vue.js development, that you can install with one npm or yarn command 

npm install -g @vue/cli
# OR
yarn global add @vue/cli
(more info you can find on the official website: https://cli.vuejs.org/).

Then use the next command for your Vue.js project: 
$ vue add vuetify

Several other options to install Vuetify are available (via Vue UI, Nuxt, CDN, etc.) in the official documentation of the framework.

Angular Material

Angular Material is a framework that contains a high-quality UI component for development and gives the developers tools to build custom components with predefined patterns. The main focus of developers stays on building well-tested and customizable Material Design components, so a grid system is not a cornerstone in that framework. The grid system goes with some setting for row height, gutter size, multiple rows or columns, etc, and it is not the strength of Angular Material.
The developers team of the framework consists of a part of Angular team at Google and community contributors all around the world. They are constantly improving their product that got more than 20 k stars on GitHub.

Additional features:
Theming system for individual configurations of components.
Angular Material offers very qualify components with clean code and comprehensive documentation.

How to start:

Run the command in the Angular CLI’s:

ng add @angular/material

Materialize

Materialize is a CSS front-end Framework based on Material design principles. That framework incorporates a responsive system that works across all browsers and devices. Materialize is one of the most popular alternatives for bootstrap with 38 k stars on GitHub. Materialize offers two different versions depending on your expertise. The standard version that goes with unminified and minified CSS and javascript files, and Sass version with SCSS files. The second version requires additional knowledge of Sass syntax and Sass compiler. 

Additional features: 
Materialize goes with two starter templates: one is a simple starter page with the familiar structure like header, footer, banner, etc.; another is a similar page, but with additional parallax effect. 

You can start using Materialize by downloading CDN at cdnjs or you can get it via NPM command. 

npm install materialize-css@next

Vue Material

Vue Material is a relatively young UI toolkit that helps to build interactive and adaptive web apps. The first version of the toolkit was developed by a passionate developer who wanted to find a fast and lightweight solution with Material Design for Vue. The project has gained the support of sponsors and developers community and now it has almost 9k stars on GitHub. You can import and use different parts of Vue Material pack: separate components or whole developer tools, such as batteries-included webpack boilerplate, a SSR template for Nuxt.js, and a Single HTML file.

Additional features:
There are several premium themes of dashboards and Material Kit that are built on top of Vue Material.

To get started install through NPM or Yarn:

$ npm install vue-material --save
$ yarn add vue-material

Material Tailwind

Material Tailwind is a freshly launched open source component library for Tailwind CSS and Material Design 2. It was built by developers for developers and it comes with a large number of fully coded CSS components. The first version of Material Tailwind is based on ReactJS, but versions for Vue.js, Angular.js, Svelte, and Vanilla Javascript will be released in the near future. You only need to have a basic knowledge of ReactJS to use this library. Material Tailwind is an open-source project by Creative Tim, so anyone can contribute to solve different issues or expand its components. 

Additional features: Material Tailwind also comes with 3 fully coded sample pages: Landing Page, Profile Page, and Login Page.

To get started install through NPM or Yarn:

$ npm i -E @material-tailwind/react
$ yarn add @material-tailwind/react -E 

Twitter Bootstrap Alternatives without using Material Design

Skeleton

Skeleton is a rare beast on the Internet. The developers name it “a dead simple, responsive boilerplates”, and this is the absolute truth. Why so? All other libraries and frameworks go with tens and hundreds of inbuilt components and elements, that stay with the app whether it uses them or not. Hence, frameworks increase the weight of the code and the number of lines in the code.

The core idea of Skeleton is to be as lightweight and “dead simple” as possible, and the developers succeeded. That boilerplate contains approximately 400 lines of code and the whole documentation that contains information about the grid system and several components (like forms and buttons) with code samples takes less than 5 minutes to read. Skeleton provides adaptiveness through a 12-column flexible grid system. It’s a very popular boilerplate on GitHub with almost 18k stars and 3k forks, but the last update was in December 2014. 

The additional information you need to know: 

The max width of the grid is 960 px. That means it’s OK to use Skeleton if you want to see your design adapt comfortably to small viewports. But computer screens are getting bigger every day (and we speak not only about the standard and widespread 1900 x1280 resolution but about MacBook pro laptops with 2500 + screen resolutions), and that layout with 960 px max width looks a little ridiculous on that screens. So, think about your target users and devices they use before developing your app with that grid system. If you know that 80 percent of them use apple products it’s better to use an alternative grid system. 
The second point is worth noting is that although Skeleton supports nested columns, the grid has %-based gutters that result in different gutters inside the nested grid and poor readability on small screens.  

You can start using Skeleton by downloading the repository from the official website or cloning it from the GitHub.

Ink

Ink is a UI Kit where all components and UI elements are based on a grid system that gives you impressive control on how to use the horizontal space. Its grid system divides screen sizes with several breakpoints from tiny (up to 320 px) to xlarge (the screen width above 1261 px). First of all, Ink is an interface kit, so it contains a bunch of UI elements and Javascript UI components. Among them are tables, buttons, alerts, date-pickers, carousel, progress-bars, modal, tabs, and much more. Furthermore, Ink has a modular architecture and comes with a powerful library that provides DOM manipulation methods, Ajax and JsonP request handling, Utility methods, and others.

Additional features: 
You can find a Cookbook page on the official Ink website. This is a page that contains ten free examples of common layouts you can use to start the development quickly. You can either view demo for every sample or download the source code. 
Even though the last big update of Ink repository was in 2015, the development team still supports users that use their product.  

To get started simple use CDN Fastly or download the repository from GitHub.

Foundation

Foundation is notable for the fact that it implements a convenient XY grid. The framework contains all the interactive components necessary for modern web development, such as navigation, buttons, tables, menus, and so on. The framework focuses on the Mobile First approach. From the beginning, the mobile version is being developed, new elements are gradually added, and thus the desktop version of the application appears. This is very convenient and saves a lot of time, as it immediately introduces design restrictions on the product. Foundation uses jQuery, Normalizr, Boilerplate.

Additional features: 

There is no incompatibility with  any server technologies. Mobile First approach.

To get started use

# Install
git clone https://github.com/foundation/foundation-sites
cd foundation-sites
yarn

Bulma

Bulma is a pure CSS framework (no JS files at all), that helps developers to create a quality web interface without the need to include additional JS files into your project. This is one of the main features of Bulma and exactly that one why developers love it. That framework has more than 40 k stars on GitHub and 3,5 k forks. Bulma is the most popular JS free alternative to Bootstrap.

Additional features you should know about: 
You can find a lot of developers, that use that framework, open community, and free support. Although it’s quite easy to start using Bulma, it becomes even easier when thousands of developers are ready to help and a vast amount of tickets have been already solved. 
There are several related projects from Bulma’s developers on GitHub that can be useful. For example, Bloomer – a set of React components for Bulma. 
Bulma goes with detailed and comprehensive documentation for classes, colors, elements, and modular architecture. 

If you decide to give a chance to Bulma, there are several ways: 

– npm install bulma
– yarn add bulma
– bower install bulma
– download package from CDN

Semantic UI

Semantic UI is a UI framework that helps you build beautiful websites, simplifying the process of front-end development. The framework uses CSS, HTML, and JavaScript. “User interface is the language of the web” – that are the opening words from the official website. And that words represent the core idea of Semantic UI. It helps you to create your theme with the help of progressive truthfulness in the process of development. Progressive truthfulness is the concept originating in the book “The Design of Design” by Frederick P. Brooks Jr. The point is that you don’t need to create a component or UI element from a blank canvas, instead you use a built-in component and customize it with CSS variables and variables inheritance (Semantic UI contains more than 3000 CSS variables). That framework gained great popularity on GitHub with 48 k stars.

Additional features: 
Easy integration with React, Angular, Meteor, and Ember frameworks. 
Semantic UI offers several additional versions: CSS only, LESS only, LESS plugin, EmberJS, Meteor-Less, Meteor-CSS, Bower. 

If you decide to start using it: 
You need to install Node.js and Gulp first. Then use the next command:

npm install semantic-ui # Use themes, import build/watch tasks into your own gulpfile.

Closing words

In closing we want to quote the words of full stack developer Brad Traversy:

“The more you learn, the easier it is to learn more and to fit all of these technologies together. Try not to get overwhelmed. Take it one step at a time and do some research, and figure out what you want to do.”

The source

Thanks for reading!

You might also like these articles:

• Top 18+ Articles of August to Learn JavaScript
• Typescript vs. Javascript: The Key Differences You Should Know in 2020
• Top 10 Angular Material Admin Dashboard Templates

The post Top 11+ Twitter Bootstrap Alternatives [Updated 2024] appeared first on Flatlogic Blog.

What is important here is the fact that the vastness of possibilities the world of app creation provides is what allows you to enter it seamlessly. And, even more than that, it allows you to create great life-improving applications and significantly improve your finances as well. Now that we are all on the same page about why you should try and create an app at all, let’s take a look at how to create it from two points of view: a theoretical and a practical one.

Reasons to create your apps on React

Let’s begin with the theoretical side of the question. There are many ways to create an app, ranging from Xamarin and AppInstitute to the main hero of this article – React. Don’t get us wrong, this is not a biased opinion, each tool has its advantages (and disadvantages, to be completely honest), but out of all of them React stands out for a number of reasons. Let’s give them a quick rundown:

·   React is tried and tested. As React was released in long-gone 2013 and, even more importantly, has improved immensely since then, it has proved its versatility and longevity. Moreover, some of the biggest and the baddest web and mobile apps, such as Facebook, Instagram, and Discord to name but a few, are made on React. So, you can rest assured that your app won’t be React’s first rodeo and it will be more than to create a worthwhile app in the hands of a capable developer.

·   React is JavaScript-based. In its essence, React is an open-source JavaScript library. So, there is no need to learn new programming languages, as chances are that you or someone in your team is already able to write in JavaScript.

·   React is scalable. Created by Facebook, React can support humongous projects. This can be really useful if you plan to create a great big app or plan to expand your project in the future.

·   React’s code is reusable. Being an open-source JavaScript library, React allows for code components reusage. It saves time and speeds up the app development process tremendously. This aspect of React will come into play if you plan on creating multiple applications or if you already have previous apps, with components you would like to introduce into your current project.

·   React has an enormous community. We all need a little help from time to time and seasoned React developers are no exception to this. The React community are great problem solvers who will be able to help you crack a tough issue, minimizing the delays in the development process.

As you can see, React has its fair share of advantages, which really consolidates its position on the market and in the hearts of many a developer. And those hearts also include ours and, hopefully, yours in the future. Now, let’s take a look at how the actual process of creating an app on React goes with a practical example.

Tutorial on Manual React App creation

In this example, we are going to create a simple React App with the help of Create React App and three other tools that will be required to complete the task. They are:

·       Node.js – an open-source back-end JavaScript runtime environment, needed for Create React App to function;

·       The npm package manager, version 5.2 or newer;

·       And a code editor. The one we are going to use in this example is Visual Studio Code.

The first step – Installing Create React App

In order to install and subsequently use the Create React App, we open the terminal/command line on our computer and use the npx tool. The latter gives you the ability to use the create-react-app package without the need to install it on your computer and ensures the usage of the latest Create React App version. So, to boot up Create React App, use the following line of coding in your terminal/command line:

·   npx create-react-app awesome-react-app

Immediately after that, the aptly named «awesome-react-app» folder will appear with all of the packages it requires auto-installed. After that, the first step is complete.

The second step – The Project Structure Review

Now, it is time to take a look at the structure of our project. Ideally, it should look like this:

Let’s have a quick rundown of the elements contained within awesome-react-app.

·       README.md is a file on the Markdown language, which contains lots of helpful tips and links to learn Create React App.

·       node_modules is a folder, no comma containing all the dependency-related code that has been installed by Create React App. Leave it be and don’t go into this folder.

·   package.json is “The Heart” of any project made with Node. It manages all the dependencies in the node_module folder, as well as all the scripts needed to run our awesome app.

·   The .gitignore file is needed to exclude files and folders from the Git tracking.

·   The public folder is used to store all the static assets of our React App, like images, svgs, and fonts, etc.

·   And, last but not least, the src folder. This one is quite important, as it contains all of the source code of our app. It is also the place where we mostly work while building a React App.

Now that we know what our project contains, it is time to undertake the third step.

The third step – Running the React Project

We start by dragging our project into the code editor and running the following command:

·   npm start

This command will open a new tab with our app in the computer’s default browser on localhost:3000. And, as we see, it already has some content, as in the picture below:

Now we can get into the src folder, where all of this app code is contained. Here we can change and modify the code to suit our purposes and goals. At this point the code will look like this:

Let’s change a couple of things here and there. For example, let’s remove the p and a tags, and add an h1 element, renaming it into the “React Posts Sharer”. After these modifications this piece of coding will look like this:

After the changes are made, we can press the Command/Ctrl + S combination to immediately see the updates made, like in the picture below, and move on to the fourth step.

The fourth step – Running Tests with the React Testing Library

The Create React App tool is equipped with a built-in testing device, called React Testing Library and can be run with the following command:

·   npm run test

But if we run the test at this stage, it will fail due to the changes made in the previous step, the main reason being the loss of a link element, which was changed into a title one. Thus, we need to make the small adjustments listed below:

The fifth step – Changing the App’s MetaData

React Apps work by implementing quite a simple concept – the package ReactDOM renders the application by attaching it to an HTML element with a ‘root’ id value. We can find this element in the public/index.html file:

As we can see in the code above, our entire React App is attached to the HTML page via the div with the root id. And here is where our metadata comes into play, as by changing it in the head tags we are effectively telling search engines and potential users about our React App specifically.

Now that this app differs from others a little bit more, we can go on to the sixth step.

The sixth step – Working with Images and Other Types of Assets

It is quite likely that your project will include some types of assets and we bet on images. So, to work with them we need to look inside our App component:

Having cleared that up, we can go to the seventh step.

The seventh step – Installing Dependencies

First off, install the axios dependency in order to make requests to get the posts inside our illustratory post sharing React App. To do that we are going to run the following command:

·   npm install axios

Secondly, after the installation is complete, we are going to add it to the node_module folder of the app. When that is done, we need to review all the dependencies directly installed within our app’s package.json file in order to ensure that the axios dependency has been added to the right section:

If all good, we can move on to the eighth step.

{
"name": "awesome-react-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"axios": "^0.21.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.2",
"web-vitals": "^1.0.1"
}
}

If everything is dandy, we can move on to the eighth step.

The eighth step – Importing components

There is no particular need to write all of our code inside the App component, as we can create a separate component that will be able to fetch and display the data needed at any given moment. We will create this component inside the src folder under the Posts name, and, in turn, put within it the Posts.js file.

In order to fetch the posts we need, a request from JSON Placeholder should be made, after which we will put them in a state ‘posts’ variable and map over them, so their titles and bodies:

   // src/components/Posts.js
 
import React from "react";
import axios from "axios";
 
function Posts() {
const [posts, setPosts] = React.useState([]);
 
React.useEffect(() => {
axios
.get("http://jsonplaceholder.typicode.com/posts")
.then((response) => setPosts(response.data));
}, []);
 
return (
<ul className="posts">
{posts.map((post) => (
<li className="post" key={post.id}>
<h4>{post.title}</h4>
<p>{post.body}</p>
</li>
))}
</ul>
);
}
 
export default Posts;

Now the fetching and returning of post data from our Posts component are secured. But we still need to display it in our app. Import it into the App component to make it secure. So, we go back to the components folder of App.js and get the Posts component from Posts.js. Now we can place the Posts component under our header:

  // src/App.js
 
import Posts from "./components/Posts";
import "./App.css";
 
function App() {
return (
<div className="App">
<header className="App-header">
<img src="/logo.svg" className="App-logo" alt="logo" />
<h1>React Posts Sharer</h1>
</header>
<Posts />
</div>
);
}
 
export default App;

And that allows us to stop thinking about the eighth step and think about the ninth one.

The ninth step – Styling React App with CSS

Style and design of the app are important. So, it is very helpful that the Create React App comes with pre-installed CSS support. But we are more than welcome to improve it within the App.css file that can be found inside src. For example:

/* src/App.css */
 
.App {
text-align: center;
margin: 0 auto;
max-width: 1000px;
}
 
.App-logo {
height: 40vmin;
pointer-events: none;
}
 
.App-header {
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
}
 
li {
list-style-type: none;
}
 
.post {
margin-bottom: 4em;
}
 
.post h4 {
font-size: 2rem;
}

Styling the app, in general, can be made in the index.css file. There, we can add additional priorities. For example, let’s make the background of our app dark and its text white by the following lines of code:

/* src/index.css */
 
body {
background-color: #282c34;
color: white;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

Now that we are happy with the styling of our app, we can finally get to the tenth and final step of your manual React App creation process.

The tenth step – Building and Publishing the React App

This step is quite easy and enjoyable as we simply need to build our React App to ensure that its size will not affect its productivity. In order to do that we run the build command:

npm run build

As a result, we will get the output, similar to this:

·       Compiled successfully.

File sizes after gzip:

46.62 KB  build/static/js/2.1500c654.chunk.js

1.59 KB   build/static/js/3.8022f77f.chunk.js

1.17 KB   build/static/js/runtime-main.86c7b7c2.js

649 B build/static/js/main.ef6580eb.chunk.js

430 B build/static/css/main.5ae9c609.chunk.css

And everything is good and proper, we can finally run our built React App by using the serve npm package:

   npx serve

This command will start our React App, ready to be used or published on the web or deployment services. And this concludes the process of creating a web app from scratch, which, as you can see, is not an inherently difficult process by any stretch. But it is always tempting to ease your work even more. And we can show you how to create any web app faster in our video guide.

Simplifying the process with Flatlogic’s Full Stack Web App Generator

What do we mean by simplifying the process as a CMS? With the help of Flatlogic’s Full Stack Web App Generator, you can do it in a jiffy. Here is a guide video made by our CTO, Alexey, on how to make a React app step by step:

Step №1. Choose your projects name

Any good story starts with a title, any good React App CMS starts with a name. So, summon all of your wit and creativity and write your project’s name into the fill-in bar in Flatlogic’s Full Stack Web App Generator.

Step №2. Select your React App’s Stack

At this step, you will need to choose the frontend, backend, and database stack of your app. And, to correlate with our illustrative React App, we will choose here React for the frontend, Node.js for the back-end, and MySQL for the database.

Step №3. Choose your React App’s CMS Design

As we’ve already mentioned, design is quite important. So don’t shortchange yourself in such a joy as a beautiful design for your app’s CMS. Choose any from a number of colorful, visually pleasing, and, most importantly, extremely convenient designs Flatlogic’s Full Stack Web App Generator presents.

Step №4. Create your React App’s Database Schema

Even such an important step as this one is nice and easy with Flatlogic’s Full Stack Web App Generator, as you can choose from and build upon a number of database schemas. And as our illustrative React App was a blog-like one, simply pick the pre-made “Blog” option and go forward on your merry way to the next and final step of this seamless CMS creation process.

Step №5. Review and Generate your React App’s new CMS

In the final step, just to make sure everything is as you want it to be, you can review all of the previously made decisions and click the “Create Project” button. After a short time to generate, you will have at your fingertips a beautiful and fully functional CMS for your React App. Voila! Nice and easy!

Conclusion to have

Today we took a small, but important glimpse into the fascinating world of React App creation. And there are a couple of conclusions:

·       App creation is an immense and breathtaking process, which can allow you to create something beautiful and needed;

·       React is a great tool to create React apps;

·       And the process of creating React apps can be easy and satisfying. Especially when it comes to creating its CMS with the help of Full Stack Web App Generator.

So, don’t deny yourself the pleasure of React App creating. Be the artist, the inventor, and the life-improver in one beautiful package. Also, don’t deny yourself the pleasure of reading up on more of our articles, and have a nice day!

Suggested Articles

• What is CRUD? How to create a CRUD app?
• How to Make a Headless CMS for Dating App Like Tinder
• How to Build React CMS for Blog [Step-by-Step Guide]
  

The post How to Create React App in 2023 [Guide] appeared first on Flatlogic Blog.

There is no construction that can be completed without the proper tools. And that statement is not only true when it comes to actual physical constructions. It is just as true when it comes to web applications. In order to make a worthwhile web project, you will also need proper and fitting tools. In that regard, there is no more fitting tool than VueJS template.

That is why we here at Flatlogic have decided to pay our respects to this wonderful framework by compiling a list of ten VueJS templates that we can legitimately call the top ones.

But, in order to do so, a quick rundown of what VueJS is, what its pros and cons are, is definitely in order. So, without further ado, let’s get to it.

Vue Pros and Cons

We are sure that in real life you are more than familiar with Vue. But in order to do this fascinating theme justice, let’s imagine for a moment that you, dear reader, know absolutely nothing about it. On such an occasion, the most fitting starting point would be to define Vue in order to understand what kind of a beast we are dealing with here.

So, what is Vue? Also known as VueJS, it is an open-source front-end JavaScript framework with a model-view-view model architectural pattern. Vue is widely used to build user interfaces and single-page apps, as well as a desktop and mobile apps in connection with the Electron framework.

Knowing the definition of VueJS will help us better understand its pros and cons, which we now propose to consider in detail.

Firstly, let’s look at Vue’s pros:

1.    Vue is small. This point will be just as small. Vue weighs only 18 kilobytes in its .zip form. This tiny size contributes not only to its fast downloading but also to its fast installation and positive impact on your SEO and UX.

2.    Two-way data binding. This advantage of VueJS goes hand in hand with another pro – usage of Virtual DOM. But we are going to look at the latter in a moment.

Two-way data binding is the inheritance Vue has from Angular, as Vue’s creator – Evan You does not make any secret of the fact that Vue was an attempt to take all the positive aspects of Angular and create a better and lighter version of it. And as two-way data binding – a connection between model data updates and view, is one of the best features of Angular, it has been added to Vue. The model by which two-way data binding works can be seen in the picture below:

Why is it one of the best features? The explanation is simple – in one-way data binding, the data-containing components can be updated only from time to time, while with two-way data binding it is easier to update such components as you go along and track the updates in this data. So, developer-wise, the process of updating is much clearer and easier to complete. However, such a method has its own disadvantages, which we will discuss in the “Cons” section of this part.

3.    Virtual DOM. By itself, DOM, which stands for the Document Object Model, is an inherent part of any front-end development framework, which represents any given part of an XML or HTML document in a tree structure. And, despite its undeniable importance, updating DOM, which is unavoidable when making updates to the information, can be best described as burdensome and time-consuming. So, in order to save your valuable time, VueJS utilizes virtual DOM – more or less a virtual copy of an original DOM that figures out what elements to update, without re-rendering the whole DOM. This helps considerably speed up the process of rendering as well as improves the app’s performance in general. Another thing that should be mentioned is that although in most cases performance depends more on code optimization and quality, an app’s performance is, nonetheless, one of the most important factors when choosing the framework to build your project with.

4.    Readability and single-file component usage. To put it in layman’s terms, in Vue each and every piece of your project is a component that represents an encapsulated element of your project’s interface. Such a way of managing app’s code is called component-based architecture, or CBA for short, and it is utilized not only by Vue, but also by such prominent web development players as React and Angular, as we said before and there are a couple of benefits to such a structure:

·       Reusability of components. As all of the elements are encapsulated, they can be easily redistributed and reused in other projects;

·       Readability. Vue’s components are stored separately in their own files, making it exceptionally easy to search for them and, more importantly, read them for maintenance and fixing.

·       Fewer language barriers. All of the code of the app’s components can be written in HTML, CSS and JavaScript, meaning that the chance of needing to invest in learning rarer languages is vanishingly low.

·       Convenience in unit-testing. Unit-testing is an integral part of quality assurance and having all of your elements presented in the form of components can simplify this ordeal a whole bunch, as it mostly only requires tinkering with the smallest parts of the app on their own.

5.    Solid toolset and surrounding ecosystem. Having been released in 2014, Vue has already gained quite a powerful toolset. One of the most impressive ones is, actually, Vue’s standard tooling – Vue CLI, which supports Babel and TypeScript, as well as providing said unit testing, end-to-end testing tools, and a plugin installation system. But that’s not all there is to Vue’s toolshed, as Vue now also has its own browser debugging tools, server renderer, and state manager in Vuex.

6.    Capable of integration and flexible. As it is becoming more and more standard, the ability to integrate into existing apps is easy with Vue, as it only relies on JavaScript and does not require any other tools to work. And, as we have already mentioned, you can write the templates as you please with Vue. There is nothing stopping you from using HTML, JavaScript, or JSX.   What this actually means is that there is a zero-project where you would be unable to use Vue.

7.    Steep learning curve and concise documentation. This advantage will be most visible for those Vue Developers that are just beginning their dive into web project creation. But, nonetheless, it is an important advantage, as Vue does not require any deep knowledge of libraries, JSX, and TypeScript and its documentation are quite well-structured containing possible topics, precisely describing everything from installation to more in-depth things.

8.    Community. Simply put, it is huge and it is active. Stack Overflow tags, forums, chats, and Discords – you name it – Vue has got it. But, even more importantly, the community is helpful, meaning you will never be alone with any problems you may have.

But this wouldn’t be much of a pros and cons list if we’ve only mentioned pros, would it? So now let’s take a look at less pleasant sides of Vue starting with:

1.    Language barrier. But not the one you’ve thought of. The thing is that the adoption of Vue by such enterprises as Xiaomi and Alibaba shifted the general content and discussion discourse in a more oriental orientation. Thus, searching for Vue’s content can lead you to forum discussions, plugin descriptions and instructions put in the beautiful Chinese language, which not all of us are well-versed in.

2.    Vue’s reactivity is complex. Although Vue’s two-way data binding is an undoubtable advantage, it is not without its drawbacks. We mainly refer to the complexity of Vue’s reactivity process, which comes as the result of the app consisting of components and requiring a separate watcher for each component to render the data. And, in turn, constitutes the fact that Vue’s reactivity system only renders those chunks of data that were triggered and, unfortunately, this system is quite prone to mistakes, requiring the data to be flattened.

3.    Not fitting for large-scale. We have already mentioned that Vue is like Mary Poppins – practically perfect in every way when it comes to creating single-page apps and user interfaces. But when it comes to larger apps it is not all that fancy. Vue is much more of a sprinter, not a marathon runner, in order to be fitting for larger-scale projects the technology should be much more stable so that all the rousing issues can be solved quickly and swiftly. Unfortunately, as of yet, Vue is not at such a point in its evolution, thus it is more commonly used in the development of small projects.

4.    Scarce resources. Don’t worry, Vue’s ecosystem is wide enough when standing on its own. But it is still not as big as such behemoths as React and Angular. And the difference of available plugins between, for example, Vue and React is in the hundreds.

5.    Lack of experienced developers. Vue is at the beginning of its journey and is now gaining popularity. Thus, the number of really knowledgeable Vue devs is pretty small as of now. But this problem will surely resolve itself in a couple of years.

Summing up this part of the article, Vue is a powerful and versatile tool for single-page apps and user interfaces development. But it has its fair share of issues, like any other framework. The main difference here is that Vue, being an up-and-coming player, still has the potential to get rid of most of them in a short span of time and become even more Merry-Poppins-like.

Now, it is time for our main attraction – looking at the crème de la crème of Vue Templates!

Top Ten Vue Templates

Before we start it is ought to be said that this list is in no particular order. Look at it as a collection of beautifully made and visually stunning Vue templates that you should pay closer attention to.

1. Sing App

Demo

The first number on our list is Flatlogic’s own pride and glory – Sing App. Built with Vue JS 2.5.2 and Bootstrap 4, Sing App is an exceptionally well put together admin dashboard template for virtually any task imaginable. We can spend hours and hours talking about how great this Vue template is but it is much better to see it for yourself.

2. Exomac

Demo

Number two on our list is Exomac – a template that, if it were a person, would totally look like a very presentable gentleman in an exquisite suit screaming “Business” at the top of his lungs in the middle of the street, but still sound convincing and respectable. Exomac has just the right number of components, elements, design and functionality to create the perfect cocktail for any business or corporate website. And the icing on the cake is the fact that this template is extremely flexible to work with due to its lack of JQuery dependencies.

3. MaxCoach

Demo

The third entry to this list is an online course and education web projects template called MaxCoach. To personalize this template, imagine your favorite teacher ever and give him or her a stylish jacket and cool sunglasses, as MaxCoach is just as slick. But it is not just that: this template possesses a tremendously interactive interface for all of your project’s online courses, Google Font, swiper sliders, sticky sidebars, cross-browser support, SEO-friendly codebase, no console error and a plethora of other cool features.

4. Castro

Demo

Despite having a somewhat divisive name, the fourth Vue template on our list – Castro is an exceptionally built (pun intended) construction template. As a human, Castro would be a strong and confident pro-business building expert with a low tolerance for cigar smoke. But as a template, Castro is unique and fast-forwarding, as well as possessing tons and tons of treats to serve you well in the process of building an exceptional construction website.

5. Fantastic

More info

If Fantastic was a person, it would be a precise and straight-to-the-point promoter that is just as convincing as it is charming. Possessing an exceptionally well-crafted design, Fantastic is also multi-purpose, including features like Vue Platform, fast loading, clean code for you to tinker around with, and 5 different home page variations. But wait, there is more, as Fantastic has 100% responsive design, more than 1000 icon fonts, and cross-browser support. A sight to behold indeed.

6. Softbox

Demo

Softbox – Vue Software landing page template. A human version of Softbox would be a pleasant and knowledgeable developer, who is always there to help you and give helpful advice in his or her mastered field of expertise. As a Vue template, it is perfect for your software-oriented web projects as it is packed to the brim with such helpful features as responsive modular design, detailed documentation, proneness to customization, and lots of others.

7. Brook

Demo

The seventh entree is Brook – a creative multipurpose Vue template that will be quite fitting for a number of different projects. If we were to imagine a human version of Brook it would be an artsy student, who has delved into lots of different arts and crafts and is successful in most of them. As a template, Brooks possesses many useful features, such as customizable home-pages, more than twenty-one blogs, and portfolio layouts to Cross-Browser Compatibility. And that’s just the tip of the iceberg. But words do not do this wonderful template full justice, so we recommend exploring Brooks for yourself.

8. Skote

Demo

Let’s get to number eight on our list – Skote. This VueJS Admin & Dashboard Template can be summarized in two words: minimalism and efficiency. If Skote was a person, it would be a very stern and composed one. But its greatest power lies in its variability, as Skote allows for all sorts of customization, having such features as dark and light versions, RTL options, Firebase authentication, multiple layouts, 100% responsive layout, clean and well-commented code, W3C validated code, and three different types of charts.

9. Light Blue Vue

Demo

The pre-last ninth spot on this list is occupied solely by none other than Flatlogic’s very own Light Blue Vue Admin Dashboard Template, empowered by Magnifique Vue backend, which includes Vuex, Vue-router and Vue-bootstrap, amongst other things. This is a rich dashboard with a dozen of beautifully made UI components; it will become your reliable starter dashboard for building any type of SaaS, CMS, or project management tools. Learn more in its complete documentation.

10. Mitech

Demo

And last but not least, as we remind you that this list is in no particular order, the tenth spot on our list goes to Mitech technology and blog-oriented Vue template. A human Mitech would be a hip, tech-savvy youngster that knows what is good for him or her and knows how to get it. Its design is elegant but modern, its features are plentiful, including a dynamic blog, clean code, font awesome icons, cross-browser support, and, of course, clear documentation.

And that is our Top Ten Vue Templates. Bear in mind that there are lots and lots of other Vue templates that are also worthy of praise, but these ones are just the rarest of gems and you should definitely look at them first.

But what if after looking at all of these templates you are left with a desire to create your own CMS? In that case, you are in luck, as now we come to the part of the article, where we tell you all about creating one in under five minutes!

How to Easily Build Your Vue App with Flatlogic

“Creating anything worthwhile in under five minutes either requires gradual and methodical preparation, or pure luck mixed with great talent or is impossible” – you might think. And that would have been a perfectly valid argument if not for the existence of Flatlogic, which makes it not only possible but fun to do.

Step #1. Choose a name for your project

This step will take less than 5 seconds, as all you have to do is choose a name for your project and fill it in the corresponding blank.

Step #2. Selecting the stack

Once again, a small, yet crucial step. Here, you choose the front end, backend, and database for your project. As we are creating a Vue project, we’ve selected Vue for the front end, Node.js for the backend, and PostgreSQL for the database.

Step #3. Choosing design

Although hours and hours of precious time can be spent on creating and perfecting the design of any project, Flatlogic’s Full Stack Web Application Generator provides you with an opportunity to skip this stage of development and simply choose from a number of ready-made designs for your CMS. For our example, we’ve decided to go with the Classic one, spending just about 15 seconds looking through the variants.

Step #4. Creating database schema

This step is one of the most time-consuming when done in a traditional manner. But with the help of Flatlogic’s Full Stack Web Application Generator, it is nice and easy, as you can simply pick the database schema that is the closest to your needs and tinker with it to make it completely suit your needs. The needs of our example required a book store option, which is one of the ready-made options. Thus, we’ve spent the entirety of one whole minute looking through the variants and choosing which one we need.

Step #5. Reviewing and generating your project’s new CMS

And thus, we’ve come to the final step of creation, where we review our choices to reassure ourselves that we’ve picked everything we wanted, after which we just press the “Create Project” button and wait for a bit to get and deploy our Vue project’s brand new and fully-functional CMS. And, after two short minutes, voila!

Thus, the whole process took around three and a half minutes and we have created our new CMS. And it is more than worthwhile, as you will see for yourself when you create one of your own. 

Recommendations

As you can see, there are many excellent Vue templates to choose from in 2024. Whether you’re looking for a sleek and modern design or a more traditional layout, there’s a template on this list that will suit your needs. Take your time to explore the options and choose the one that best fits your project.

Vue has its fair share of setbacks, it has just as many if not more pros. So, if you haven’t tried it yet, you should definitely give it a chance. Even more so, as there are already a great number of attention-worthy templates on the market today. And if you’re still doubting between Vue and React, then tap here to learn which one is better in our ultimate guide, Vue vs. React.

And the sentiment stays doubly true due to the fact that you can create a Vue app in less than five minutes with the help of Flatlogic. And that concludes today’s article. Have a nice day and, as always, feel free to read up on more of our articles!

Suggested Articles

• Top Angular Admin Templates in 2021
• Top 16+ Vue Open Source Projects
• Vue.js Bundle Released by Flatlogic

The post Top 10 Vue Templates to Choose from in 2024 | Update appeared first on Flatlogic Blog.

Have you ever wondered What exactly is an Image Manipulation Library? How can JavaScript image manipulation libraries enhance my web application? What makes these libraries stand out in the vast sea of development tools? Why should I integrate them into my business software toolkit? Albert Einstein once said, “Creativity is knowing how to hide your sources,” and in the digital age, this wisdom resonates more profoundly with the use of sophisticated tools like JavaScript image manipulation libraries.

Today we would like to talk to you about a topic most interesting – JavaScript image manipulation libraries. And, to be more precise – those JavaScript image manipulation libraries deserve your particular attention when you develop your next spectacular web app. Integrating JavaScript image manipulation libraries into your business software toolkit can dramatically elevate the visual appeal and functionality of your web applications, making them not only more engaging but also tailored to the specific needs of your business context.

What is an Image Manipulation Library

Let’s begin with the basics. An Image Manipulation Library (IML) is a powerful tool designed to streamline, organize, and modify the graphical elements of your application in various ways. These libraries cater to a range of functions, from cropping and resizing images to converting formats, enhancing quality, and much more. Integrating an IML into your business software development process is essential, as it not only enriches the visual appeal but also supports the dynamic functionality required in today’s competitive business landscape. Essentially, they’re indispensable for web app development, unless you’re aiming for a stark, monochrome look devoid of any imagery—a highly unlikely choice in today’s visually-driven digital landscape where design is as crucial as functionality and usability. Remember, ensuring your images are impeccable before they make their way into your app is key. Whether you opt to fine-tune them yourself or rely on a trusted image manipulation service, the goal is to achieve visual perfection that complements your app’s overall excellence.

What do JavaScript Image Manipulation Libraries bring to the table?

The next question to discuss when is the reasoning for choosing an image manipulation library, based on JavaScript, for your next web app instead of, for example, C++-based ones. The answer is simple: even though at first glance JavaScript IMLs are metaphorically heavier, they are reliable and can create some simply astounding results.

The practical usage of some of the entries you are going to see in this article in a short time is a thing of beauty and will do nothing less than improve the development of your next web app by easing the work with the images. So, without any further delays, let’s get down to the list.

Name	Features	Pitfalls	Pricing	GitHub Stars
Pica	Resizes large images in the browser, auto-selects the best technology, and reuses images for thumbnails.	–	Free
Lena.js	Simple editor with 22 filters, small size, allows custom filters.	Might be too basic for complex tasks.	Free
Jimp	Zero native dependencies, universal, blitting, blurring, coloring, Node.js syntax.	May not be as powerful for advanced image manipulation.	Free
Grade	Generates complementary gradients based on 2 predominant colors, and enhances aesthetics.	Limited to gradient generation, not a full-fledged image editor.	Free
MarvinJ	Numerous algorithms for color/appearance manipulation, and automatic detection of corners and shapes.	Complexity might be overkill for simpler tasks.	Free
Compressor.js	Handles image compression via canvas.toBlob API, adjustable quality output.	Primarily focused on compression, less on editing features.	Free
Fabric.js	Creates and manipulates shapes, converts SVG to JavaScript, and handles object attributes like colors, depth, etc.	May have a learning curve for more complex features.	Free
CamanJS	Advanced techniques with an intuitive interface, customizable filters, and plugins, and regular updates.	Complexity and learning curve for advanced features.	Free
Cropper.js	Image cropping, scaling, rotating, zooming, aspect ratio setting.	Focused mainly on cropping, less on other editing aspects.	Free
Merge Images	Merging images onto a canvas simplifies the process of transforming images into code.	Limited to merging images, not suitable for individual image editing.	Free
Blurify	Efficiently downgrades image quality, very lightweight (less than 2 kb).	Singular focus on blurring/downgrading quality.	Free
Doka	Variety of image editing options, rich UI, supports React, Vue, Svelte, Angular, and jQuery.	More advanced than some may need, possibly overkill for simple tasks.	Paid

JavaScript Image Manipulation Libraries

Pica

Pica is a prime tool for in-browser image resizing, most useful when you want to reduce an exceedingly large image into a suitable one to save upload time. It avoids the pixelation of an image and works at a suitably fast pace. It serves a great amount of server resources on image processing and can reuse your images into thumbnails in the browser. What’s also great about Pica is the fact that it auto selects such technologies as web workers, web assembly, createImageBitmap, pure JS, etc. automatically, so there is no need for you to do it yourself.

MORE INFO

Lena.js

Lena.js can be described as a very simple, yet nice and neat image redactor and processor. It has a number (22 to be precise) image filters that you can play around with to improve your image. Lena.js is very small in size and has a killer feature that allows you to add your filters, as its code is open to anyone at GitHub.

MORE INFO

Jimp

Jimp stands for JavaScript image manipulation program and it does what it flawlessly says on the tin. Written for Node, this entirely JavaScript image-processing library has zero native dependencies. It also has no external dependencies either, which makes it quite universal. Jimp can help you with such tasks as blitting, blurring, coloring, containing images, and many others. What also advantages Jimp is its Node.js syntax that will prove easy to use for people with Python or C++ experience.

MORE INFO

Grade

Grade (not a big surprise) is another JS library on our list. Its main selling point is producing complementary gradients that are automatically generated based on 2 colors that are determined predominantly in the selected images. Such an effect allows your site or app to seem more seamless. Grade is an easy-to-use plugin that will add an aura of visually pleasing aesthetics to your finished product, which is always nice for both you and the end user.

MORE INFO

MarvinJ

Now let’s get to a more intrinsically complex JavaScript image manipulation library. MarvinJ is a powerful Marvin Framework derivative that offers quite several algorithms for the images’ color and appearance manipulation. It allows you to have an easier working process when it comes to such image processing fundamentals as corners and shapes, as MarvinJ can detect these features automatically. This way it simplifies the process of cropping out the image and even makes it more or less automated. And isn’t it, after all, the dream – to leave the tedious thing like cropping the elements out to the machines while you can concentrate on more time-, imagination- and expertise-consuming tasks?

MORE INFO

Compressor.js

And now back to the simpler stuff. Compressor.js’s whole schtick is in the name – it handles the image compression and does it well. All thanks to the canvas.toBlob API that allows you to set the compression output quality of the image in the range from 0 to 1.

MORE INFO

Fabric.js

Does your next web app need such simple, yet if used correctly, shapes as rectangles, circles, triangles, and other polygons? May it be so that it requires more complex shapes?  If the answer is “Yes” to any or both of the questions then Fabric.js is your guy – it will not only create all these shapes for you but also allow you to manipulate every aspect of it, such as sizes, positions, and rotations of the objects. But wait, there is more: control all the attributes of the upper-mentioned objects: colors, level of transparency. level of depth position and so on.

You might have noticed that we haven’t said a thing about images. But that meal is also on the menu, as Fabric.js allows us to convert SVG images into JavaScript data and insert it into the canvas of the project. So, that’s killing two birds with one stone: cool shapes and SVG images in your app’s code.

MORE INFO

CamanJS

And, once again, to the more complex JavaScript image manipulation libraries. CamanJS is a combination of fantastic and sometimes quite advanced techniques and an intuitive interface. You can use presets and filters or tinker around toggling them yourself. The cherry on top is the ability to add your filters and plugins, as well as constant updating, that brings new features and functions.

MORE INFO

 Cropper.js

We duly hope that you are not tired of the “simple-complex” swings of our list, as here comes another simpler JavaScript image manipulation library. It allows you to crop the needed images, as well as scale, rotate, and zoom around the image. But the nicest thing about this JSIML is the ability to set the aspect ratio on the picture and crop accordingly.

MORE INFO

Merge Images

A unique entree of this list, as Merge Images doesn’t crop, skew, or rotate the images. We hope you’ve already guessed what this one does – it merges the given images onto one canvas, ridding you of the need to transform them into code and working on a canvas (pun intended).

MORE INFO

Blurify

This JavaScript image manipulation library is tiny, as it weighs less than 2 kb. But its effectiveness doesn’t allow us to not include it on the list, as it downgrades the pictures that you provide it with, and does it gracefully.

MORE INFO

Doka

Doka is a JIML that will provide you with a variety of image editing. It has a rich UI that warms your soul if needed. The support for React, Vue, Svelte, Angular, and jQuery is also a nice and needed touch during the working of the images. You will get around and understand this Library quite quickly.

MORE INFO

Conclusions to have

And that’s the list. Conclusions are quite simple: your next project will benefit from using these JavaScript image manipulation libraries, as it will get you free from performing mundane tasks and you will find yourself in love with them in no time.

Start with one, if you feel cautious, and add more if you feel adventurous, as it may require some tinkering to work the way you want it to work.

That’s it for today. Thanks for reading this article and stay tuned for our new ones!

Bonus! Creating Applications with Flatlogic Platform

We’ve covered JavaScript libraries for image manipulation. Now let us take a look at a quicker and easier way to create Applications. Sometimes an application must have specific features or peculiarities we have to craft by hand. Still, the bulk of all Apps work similarly and can be built from the same blocks. We created the Flatlogic Platform to do just that. It requires no special expertise, only a few choices. Let’s see what they are!

#1: Name the Project

This step is rather straightforward. Name your project so it’s easier to find and recognize.

#2: Define Tech Stack

Next, we’ll choose the technologies our App’s components will run on. In the example above we’ve chosen React, NodeJS, and PostgreSQL for front-end, backend, and database, respectively.

#3: Choose the Design

Choose the design type that appeals to you the most. You might spend a lot of time with this interface, so choose carefully!

#4: Create Database Schema

The integrated schema editor is rather easy to master. It lets you define fields, columns, and data types for the database. If you’re short on time, just pick one of the ready schemas.

#5: Finish the App

It’s time to review your choices and click “Finish”. Check the “Connect GIT repository” box if you want to. After a brief compilation, your App will be yours to deploy and use. Great job, sir or madam!

You might also like these articles

• React Table Guide And Best React Table Examples
• Javascript Tabs: Save Space! Examples of Tabbed Widgets
• Top 30 Open Source and Paid React Charts + Examples

The post 12 JavaScript Image Manipulation Libraries for Your Next Web App appeared first on Flatlogic Blog.

Material UI Icons have become increasingly popular for React developers, as they provide a great way to give their applications a modern and professional look. However, using Material UI Icons in React can be tricky, as there are a lot of features that need to be considered. For example, you need to ensure that the icons are accessible and responsive and that they are optimized for different screen sizes. The integration of Material UI Icons in React applications enhances the aesthetic and professionalism of business software, necessitating careful consideration of accessibility, responsiveness, and optimization for various screen sizes to ensure a seamless user experience.

By reading this article, you will be able to confidently use Material UI Icons in your React applications. You will also gain an understanding of the best practices for using Material UI Icons, as well as learn how to make sure your icons are optimized and accessible. So let’s get started!

What is Material UI

Material UI is a React library based on Google’s Material Design. Google introduced Material Design in 2014 and has since encouraged developers to use its guidelines. The benefits are smoother integration with Google services and a well-received “Googly” look that so many have grown to like. As you can assume, the Material UI library combines the pluses of Material Design with those of React. Those pluses include broad compatibility, easy development, and the ability to remove unnecessary features. The latter comes in handy since many frameworks tend to weigh the application down, and “shaking off” what you’re not using negates that to an extent. Keep reading about Material UI icons and you’ll know:

• What Material UI templates are
• How we can use them with React
• How to import Material UI templates
• The best ways to use them in your project

What Is Material UI Icons and How to Use Them

Material UI Icons, serving as intuitive shortcuts for commands, operations, and navigation in applications, play a vital role in enhancing the user interface of business software, streamlining user interactions through visually coherent and easily recognizable symbols. They can also be used to represent frequent operations and savings, and are usually placed in applications and/or toolbars. Such Icons are used to create an easy shortcut to any action on the site or in the app, as well as allowing to replace long word descriptions with an easily understandable icon for a user. Material UI Icons mainly consist of two components: SvgIcon and Icon.

When it comes to Material UI Icons, the SVG component serves as the SVG path child and converts it into a React component. This React component allows you to customize the icon’s style and the reaction it makes after a click. It should also be mentioned that the size of said Icon should be 24×24 pixels, but we are getting ahead of ourselves. The second component, which is the Icon component, is there to display an icon from any ligature-enabled icon font.

Where does React fit in?

“What does it all have to do with React?” – you might ask. The answer is quite simple: you can also use them when creating a project with React’s help, which is good because it allows you to keep this task in your line of focus without a need to switch. And there are even no pitfalls, as the pack is ready to use. However, it should be said that Material UI Icons are not a be-all and end-all of UI Icons, as there are plenty of other packs on the market.

So, why choose it? In our opinion, you should choose them, because they are slick, stylish, minimalistic, and are supported by all major platforms, as well as browsers. But the best part is that they were created by Google. And this mastodon of a corporation knows a thing or two about creating site components.

So, there you have it. Now, let’s take a closer look at the process of creating and using said icons in your project.

How to import a React Material UI icon for your project

So, let’s say you are creating a website for your awesome project and you want to make it more colorful, vibrant, and, dare we say it, more internationally accessible. That’s where Material UI Icons can come to your rescue, as they tick all of the upper-mentioned boxes. So, first of all, here’s a little guide to how you can add the ready-made Material UI Icons to your project.

Step 1. Installing Material UI framework. First and foremost, install the Material UI framework to work with its components. To do so, add one of the following command lines, depending on whether you do it with npm or yarn, into your project:

npm install @material-ui/core

yarn add @material-ui/core

Step 2. Installing Material UI Icons. The next step here would be to install the icons themselves into the project’s catalog. Once again, there are two ways to do it: through yarn or npm:

npm install @material-ui/icons

yarn add @material-ui/icons

These components use the Material UI SvgIcon component we have mentioned above to render SVG paths for every icon. This, in order, constitutes peer dependency on the next Material-UI release.

Step 3. Importing Material UI Icons. After the installation of the Material UI Icons into your project’s catalog, your next step would be to import them by using one of the following two methods:

Method #1. This option would be safer than the second one, also it somewhat restricts the creative potential of the developer’s experience:

import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';

import ThreeDRotation from '@material-ui/icons/ThreeDRotation';

Method #2. This option is less safe, but, on the other hand, allows an experienced developer more creative freedom:

import { AccessAlarm, ThreeDRotation } from '@material-ui/icons';

By using one of these methods, we’ve imported Access Alarm and 3D Rotation icons into our project and you will be able to see them next time you boot up your project in their default variation. But keep in mind, that all of the icons in the Material UI framework have five different variations:

• Filled variation (the default option);
• Outlined variation;
• Rounded variation;
• Twotone variation;
• And Sharp variation.

So, if you want to use any of these variations, you would need to append the theme name to the icon name. Also keep in mind that while Material Design icons use “snake_case” naming, @material-ui/icons use “PascalCase” for the naming.

Step 4. Adding CSS to Material UI Icons to change styles. Let’s assume that your project has its own YouTube channel and you would like to add the link to it to your site. Adding the full link would look rather unfitting on any site, so, using a Material UI icon of YouTube would be a fit here. And let’s also assume that for stylistic reasons you want it to be in red and white, just as the original logo. In that potential situation, your next step would be to add CSS to your icon to make it appear the way you need. Your specific next move would be as follows:

import React, { Component } from 'react' 
import YouTubeIcon from '@material-ui/icons/YouTube'; 
export class Maticon1 extends Component { 
  render() { 
          return ( 
                  <div> 
                        <AppBar className="mrg" position="static"> 
                               <Toolbar> 
                                     <div style={{ 'paddingLeft': "600px" }}>   
Material UI Social media Icons</div> 
                              </Toolbar> 
                        </AppBar> 
  <YouTubeIcon style={{ 'color': "red" }}/><br></br> 
                    	           </div> 
        ) 
     } 
 } 
 
export default Maticon1 

In this example, Maticon1 is the component where we add social media icons. After that, don’t forget to add a reference to this component in the app.js file by doing the following:

import React from 'react'; 
import logo from './logo.svg'; 
import './App.css'; 
import Maticon1 from './Maticon1' 
 
function App() { 
  return ( 
	<div className="App"> 
  	<Maticon1/> 
	</div> 
  ); 
} 
 
export default App;

And, the next time you run your project you will see a beautiful small Material UI Icon of YouTube in red and white.

But what if you need an icon that is not in the default set of Material UI Icons? Well, in that case, the SvgIcon wrapper we’ve already mentioned above would come to your rescue. It allows you to create custom SVG icons by extending the native <svg> element. Bear in mind that all the SVG elements should be scaled for a 24×24 pixels viewport. This way the resulting icon would be available to use as a child for other Material UI components that themselves use the icons and would be available for customization with the viewBox attribute. You would also be free to apply any of the theme colors by using the color prop, as by default all the components inherit the current color. The code for customization would look the following way:

function HomeIcon(props) {
                	return (
                	  <SvgIcon {...props}>
	                      	  <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
                	 </SvgIcon>
                	);
}
 
And the code for color setting would look the following way:
·   	<div className={classes.root}>
<HomeIcon />
<HomeIcon color="primary" />
<HomeIcon color="secondary" />
<HomeIcon color="action" />
<HomeIcon color="disabled" />
<HomeIcon style={{ color: green[500] }} />

And, after adding these lines, your icons will look the following way:

That is how you install and customize your Material UI Icons. Feel free to wield this power to decorate your project with all sorts of beautiful icons and somewhat secretly enrich your end-user’s experience with it.

About Flatlogic Platform

In this article, we’ve talked about Material UI icons and how to use them in React. Icons are an integral part of what differentiates your website from competitors. They take up a small portion of the website’s face but command a great deal of the user’s attention. If you want to create your Apps by hand, this guide will help you a great deal. If saving time is of greater priority to you than individual design, there’s another path you could choose.

Creating web Applications with Flatlogic

Some Apps have unique, unpopular functionality we have to craft by hand. But those Apps are as rare and unique as the functions they perform. Most apps have more similarities than differences. Most web Apps’ basic functions are Creating, Reading, Updating, and Deleting Data. Just like the basic functions, many components and parts of an App can be categorized and replicated. We followed this line of thought and built the Flatlogic Platform to help you create React Apps without hiring a whole team of developers and with little to no special expertise. App creation with Flatlogic consists of a few choices. Let’s see what they are!

#1: Choose a name

First off, you choose a name for your project. If you have to create another project soon, you’ll need to differentiate between the two, so choose wisely!

#2: Choose stack

A complete App consists of the database, the front end, and the back end that mediates between the two. We choose the underlying technologies for each part. Any combination will work fine but depending on the resources your App will operate with, some options might have additional benefits. So, a quick research of what works well with React, Vue, or another option you choose will do you good.

#3: Choose the Design

If you’re creating an admin dashboard, the visual part may be of lower priority than other parts. Still, you’ll likely look at the panel for hours on end, so choose carefully! It might have a heavy impact on your productivity.

#4: Choose Database Schema

We can visualize a database’s structure as a spreadsheet. A spreadsheet has two dimensions with lines and columns crossing to represent a field with two distinct parameters. If we were to picture databases similarly, some would have three or even more dimensions, each one representing a relevant parameter. The parameters we need, the type of data they consist of, and how they relate to each other are the things that comprise a database schema. This part is perhaps the trickiest since it requires a thorough understanding of the data your App will process.

#5: Review and Generate

The choices have been made. It’s time to check them and (assuming everything’s in place) hit “Create App” After compiling for a while (usually a few minutes), your Application will be complete. At this point, you can connect it to your API’s data endpoints and use it. You can push it to GitHub or host it without outside services, both in one click. Enjoy!

Conclusion

Icons are small parts of an App by the screen space they occupy but not by their importance. They help us navigate the interface without spending time reading. They help project an idea or a vision in a clear and concise form. Material UI icons are easy to integrate into React, customize, and shape to your needs. It makes Material UI Icons a must-try for any project development.

And that is all for today. We wish you a happy day, filled with small pleasant things to enjoy. And, as always, feel free to read up on any other of our articles. Until next time!

You might also like these articles

• Top 20 Best React Website Templates for React Developers [Free and Premium]
• Best 10 IDEs for React.js for 2021
• React vs. Vue: What Is Easier? What Is Trending? Detailed Guide With All +/- [2021]

The post How to Use Material UI Icons In React appeared first on Flatlogic Blog.

Embarking on the creation of an Angular application is a strategic move in the realm of business software, offering a pathway to developing dynamic, interactive, and single-page applications that are both scalable and user-friendly. Angular’s popularity is rooted in its straightforward approach to application development, ensuring that with the correct expertise, developers can efficiently build and manage sophisticated web applications tailored to the evolving needs of the business environment.

By reading this guide, you will have a better understanding of Angular and the tools needed to create an Angular application. You will also have the knowledge and skills to create and maintain your Angular application. So, whether you are just getting started or are a seasoned professional, this guide is here to help you create your first Angular application.

Things to Know about Angular

Angular is a TypeScript-based open-source framework, whose main purpose is developing web applications within the business software sphere. But where Angular shines is the creation of client applications and it is regarded as one of the best tools when it comes to single-page app development as well.

The angular community consists of more than 18 million users and that number is simply impressive.

A big part of this is played by the tools and setup that Angular possesses: RxJS, Angular CLI, and different code editors that support the framework.

RxJS is a reactive programming library that is pretty crucial when it comes to working with Angular. RxJS’ main aim is to handle asynchronous data with multiple events and by doing that this reactive programming library allows engineers to build multiple channels of data exchange to ease the consumption of resources. So, RxJS is similar to a conveyor for JavaScript codes, as it allows parallel and continuing execution of events in a manner, independent from one another, and without waiting for one event to happen to complete another. And although RxJS’ learning curve might seem a bit high, it is worth every penny.

The second great tool in Angular’s arsenal is the Angular command-line interface (or just CLI for short). Favored by many an engineer, Angular CLI is easy to set up, quite understandable even for newcomers, is packed to the brim with different testing tools right out of the box and its commands can be described as nothing but simple.

Angular Pros

1.     Angular architecture is component-based and its primary architectural characteristic is the basis of components hierarchy. This fact allows developers to achieve a higher code quality by making the overall code more accessible and understandable by encapsulating all of the components with their functionality. 

2.     All Angular components are reusable. This advantage is a direct outcome of the previous one because the previously mentioned encapsulation of components makes them exceptionally self-sufficient. It also allows developers to reuse them in different parts of their applications, making the process of development a bit faster and more convenient. 

3.     Angular’s readability is off the charts. Once again due to the component-based architecture and the encapsulation. Thus, new developers, albeit new to the whole app developing a game or just new to the project, can read code in a better way and reach their plateau of productivity quickly.

4.     Angular is unit-test friendly. Try and guess why it is so. Right, you are, all because of the component-based structure that simplifies the quality assurance procedures even when it comes to the smallest parts of the app, which are, of course, units. 

5.     Angular is maintainable. It is quite easy to maintain and update the code.

6.     Angular uses TypeScript. Let us get a little misconception out of the way first – it is not mandatory to use TypeScript with Angular, as it provides devs with options on how to use their libraries more efficiently, including Redux and Flux. But why use them if you can use TypeScript, which can be described as a superset for JavaScript? Yes, it has its fair share of things to nitpick, and yes, you have to learn another language if you never worked with TypeScript, but its overall usefulness is immense. Especially if you work on an enterprise-level project, as TypeScript simply has better navigation, autocompletion, and refactoring services and it helps you to spot and get rid of common mistakes while you type in the code. All in all, TypeScript is great, and Angular is only better because of it.

7.     Angular has Long-Term Google Support. Also known simply as LTS, Google’s Long-Term Support means that Google is planning to stick with and further develop the Angular ecosystem.

Angular Cons

The main disadvantage of Angular is the fact that Angular is complex. Although the component-based architecture Angular possesses is great, how components are managed is not, as every component in your app will, most likely, need dependency injections and all of them will need lifecycle interfaces. And that’s not mentioning the fact that you will have to rely on third-party libraries that are quite specific when it comes to Angular. Thus, developing apps on Angular can be (bear in mind that it is a possibility and not an axiom) pretty repetitive and tiresome.

The second disadvantage worth mentioning mainly concerns new and up-and-coming developers and it is the fact that Angular’s learning curve is steep. As we have already mentioned, if you were to learn Angular from scratch, you would also need to learn TypeScript, modules, dependency injection, components, services, templates, RxJS management, etc.

Summing up, even though it can be fearsome for new developers and at times complicated for new and professional developers alike, Angular is a great tool for a variety of web app development needs and, with Google’s Long-Term Support, its future in the industry looks as bright as ever. That being said, let’s get to the metaphorical cherry on top of the cake of today’s article – an example of step-by-step Angular app development. 

Step-by-step Angular App Creation

1. Install Angular CLI 8;

2. Proceed with Angular 8 Project creation;

3. Add Angular HttpClient;

4. Create UI Component;

5. Routing addition;

6. Build UI with Angular Material Components;

7. Set up a REST API mocking;

8. Use Angular HttpClient to consume the REST API;

9. HTTP Errors Handling is step number nine;

10. Pagination Addition;

11. Angular Application Firebase building and deployment.

1. Angular CLI 8 installation

The first thing we will have to do to create an Angular App is to get our Angular CLI up to speed. That step is crucial, as Angular CLI is the official tool for Angular projects’ initializing and working. Write the following line of code into a new terminal that we have just created:

npm install -g @angular/cli

2. Angular 8 Project creation

Now we can initialize our Angular project. Use the following commands:

cd ~ 

ng new angular-example

After that, the CLI is going to deliver a prompt to you, which asks you if you would like the Angular routing addition. And that is just too good of an offer to decline. Right after that, the CLI sends you another prompt, which will help you to decide upon a stylesheet format you would like to use. Pick the CSS option here.

The combination of these two decisions will allow Angular to generate the files and folders required and establish the needed packages from npm. But that’s not all, as it will also set up the routing we mentioned earlier automatically.

After that, we need to proceed to the root folder and run the local development server using these commands:

cd angular-example 

ng serve

That will make our application available at the following address:

[http://localhost:4200/](http://localhost:4200/)

What we need to do is to go to this address using a web browsing of our choosing and see a beautiful, yet utterly incomplete page like this:

3. Addition of Angular HttpClient

This step is pretty easy in execution despite being command-heavy at first sight. So, to finish the simple act of the HttpClientModule importing and its incorporation into the import array, thus assuring the REST API consumption by the HttpClient, we will have to go to the file named src/app/app.module.ts to change the following:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

4. UI Component Creation

As we have already mentioned, Angular Apps are made up of components. So, to do it, we open yet another new terminal and use the following line of coding:

cd ~/angular-example 

ng g component home

Running these commands will display the following output in our terminal:

CREATE src/app/home/home.component.html (19 bytes) 
CREATE src/app/home/home.component.spec.ts (614 bytes) 
CREATE src/app/home/home.component.ts (261 bytes) 
CREATE src/app/home/home.component.css (0 bytes) 
UPDATE src/app/app.module.ts (467 bytes)

And that leads us to the creation of the About component by running the following command:

 ng g component about

And that leads us to the src/app/about/about.component.html file and add the following:

<p style="padding: 15px;"> This is the about page that describes your app</p>

Voila! We have just created a component, aren’t we just great? Now we can get to step number 5.

5. Routing Addition

Once again, a codding-heavy step, but a crucial one at that, as this step will establish the redirection of the empty path to the home component. This, in order, will constitute the first-time users’ automatic redirection to the home page.

So, what we do here is run the following set of routes into our src/app/app-routing.module.ts file:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full'},
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

6. UI Building with the help of Angular Material Components

Let’s start by going to the root file of our project and adding the following line of coding:

ng add @angular/material

After that, Angular will suggest you choose a theme for the project. And, as we feel playful, let’s choose the Indigo/Pink option. That will not be the end of it and the prompt will also ask us whether we would like to set up HammerJS for gesture recognition, as well as browser animations for Angular Material. Here we are going to simply press Enter and be on our merry way, as after that we will need to open the src/app/app.module.ts file and add the following imports:

import { MatToolbarModule

MatIconModule

MatCardModule

MatButtonModule

MatProgressSpinnerModule } from '@angular/material';

What we are doing by this is importing the modules for the following Material Design components:

1. MatToolbar – for headers, titles, or actions containers;

2. MatCard – to provide a content container for text, photos, and actions in the context of a single subject;

3. MatButton – for a native <button> or <a> element that is enhanced with styling and ink ripples of Material Design;

4. MatProgressSpinner – to provide a progress and activity circular indicator.

After the modules are imported, we can add those modules to the import array by running the following lines of code:

@NgModule({
declarations: [
AppComponent,
HomeComponent,
AboutComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
BrowserAnimationsModule,
MatToolbarModule,
MatIconModule,
MatButtonModule,
MatCardModule,
MatProgressSpinnerModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Now, we are going to open the src/app/app.component.html file and update it with the following code lines:

<mat-toolbar color="primary"> 
<h1> 
My Angular Store 
</h1> 
<button mat-button routerLink="/">Home</button> 
<button mat-button routerLink="/about">About</button></mat-toolbar><router-outlet></router-outlet>

This way we have added a top navigation bar with two buttons that can take our app user to the Home and About pages of our project.

7. Mocking a REST API

This step is packed with different small substeps we will have to undertake. But fear not, as they all are simple and you won’t spend a lot of time completing them, although you will have to be pretty precise about your actions.

To begin this step we will be proceeding to a new CLI and introducing json-server from the npm to the project. We do this with the help of the following command:

cd ~/angular-example

npm install --save json-server

And now we need to create a server folder in our Angular project’s root folder by writing these lines:

mkdir server

cd server

Don’t leave the server folder just yet, as we still need to create a database.json file and add the following JSON object that will act as a database for our REST API server:

{

"products": []

}

Now we need to go back to the command line and navigate back from the server folder to install Faker.js from our npm by the following command:

cd ..

npm install faker –save

Create the generate.js file with the following coding lines:

var faker = require('faker');
var database = { products: []};
for (var i = 1; i<= 300; i++) {
database.products.push({
id: i,
name: faker.commerce.productName(),
description: faker.lorem.sentences(),
price: faker.commerce.price(),
imageUrl: "https://source.unsplash.com/1600x900/?product",
quantity: faker.random.number()
});
}
console.log(JSON.stringify(database));

After that, add the generate and server scripts we have created into the package.json file by including the following lines in our code:

"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"generate": "node ./server/generate.js > ./server/database.json",
"server": "json-server --watch ./server/database.json"
},

Next, we will go back to the command-line interface and run the generated script by using the following command:

npm run generate

And after that, we are to run our freshly baked REST API by executing the command that goes like this:

npm run server

This action will allow us to send HTTP requests with the following API endpoints:

·   GET /products  for products getting;

·   GET /products/<id>  for single product getting by id;

·   POST /products  for new product creation;

·   PUT /products/<id>  for product updating by id;

·   PATCH /products/<id>  for partial product updating by id;·   DELETE /products/<id>  for product deletion by id.

8. Consuming the REST API with Angular HttpClient

Now we need to make Angular consume our REST API using HttpClient. We start this process by creating an Angular service that will encapsulate the code, which, in turn, will allow us to consume data from our REST API server. Check our terminal and write in the following command:

ng g service api

After that what we need to do is to go to the src/app/api.service.ts file to import and inject HttpClient. This will be achieved by doing the following actions:

import { Injectable } from '@angular/core';

import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class ApiService {
private SERVER_URL = "http://localhost:3000";
constructor(private httpClient: HttpClient) { }
}

Now we need to define a get() method, which will send GET requests to our REST API endpoints:

import { Injectable } from '@angular/core'; 
import { HttpClient } from '@angular/common/http';
@Injectable({ 
providedIn: 'root' 
}) 
export class ApiService {
private SERVER_URL = "http://localhost:3000";
constructor(private httpClient: HttpClient) { }
public get(){ 
return this.httpClient.get(this.SERVER_URL); 
} 
}

At this point, we defined a product’s variable and called the get() method of the service to fetch data from the JSON REST API server. Now what we need to do is open the src/app/home/home.component.html file to update it as you will see below:

<div style="padding: 13px;">
<mat-spinner *ngIf="products.length === 0"></mat-spinner>
<mat-card *ngFor="let product of products" style="margin-top:10px;">
<mat-card-header>
<mat-card-title>{{product.name}}</mat-card-title>
<mat-card-subtitle>{{product.price}} $/ {{product.quantity}}
</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<p>
{{product.description}}
</p>
<img style="height:100%; width: 100%;" src="{{ product.imageUrl }}" />
</mat-card-content>
<mat-card-actions>
<button mat-button> Buy product</button>
</mat-card-actions>
</mat-card>
</div>

Now we can proceed with step number nine.

9. HTTP Errors Handling

Go to the src/app/api.service.ts file and update this part as follows:

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from "@angular/common/http";
import {  throwError } from 'rxjs';
import { retry, catchError } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class ApiService {
private SERVER_URL = "http://localhost:3000/products";
constructor(private httpClient: HttpClient) { }
handleError(error: HttpErrorResponse) {
let errorMessage = 'Unknown error!';
if (error.error instanceof ErrorEvent) {
// Client-side errors
errorMessage = `Error: ${error.error.message}`;
} else {
// Server-side errors
errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
}
window.alert(errorMessage);
return throwError(errorMessage);
}
public sendGetRequest(){
return this.httpClient.get(this.SERVER_URL).pipe(catchError(this.handleError));
}
}

And now we will see the errors in our browser console:

10. Pagination Addition

What we do in this step is add the data pagination support by using the Link header of the HTTP response, which is going to be received from the REST API server. This means that we will need to instruct HttpClient to give us the full HttpResponse, instead of providing us with the response body. Use the observe option.

Start by opening the src/app/data.service.ts file and importing the RxJS  tap() operator with the following command:

   import { retry, catchError, tap } from 'rxjs/operators';

After that, add the following variables:

public first: string = “”; 

public prev: string = “”; 

public next: string = “”; 

public last: string = “”;

Now we are set to add the parseLinkHeader() method to parse the Link header and populate the variables we have added in the previous substep:

parseLinkHeader(header) {

if (header.length == 0) {

return ;

}

if (header.length == 0) {
return ;
}
let parts = header.split(',');
var links = {};
parts.forEach( p => {
let section = p.split(';');
var url = section[0].replace(/<(.*)>/, '$1').trim();
var name = section[1].replace(/rel="(.*)"/, '$1').trim();
links[name] = url;
});
this.first  = links["first"];
this.last   = links["last"];
this.prev   = links["prev"];
this.next   = links["next"];
}

And that, in turn, allows us to safely update the sendGetRequest() with the following lines of coding:

public sendGetRequest(){

// Add safe, URL encoded _page and _limit parameters

return this.httpClient.get(this.SERVER_URL, {  params: new HttpParams({fromString: "_page=1&_limit=20"}), observe: "response"}).pipe(retry(3), catchError(this.handleError), tap(res => {
console.log(res.headers.get('Link'));
this.parseLinkHeader(res.headers.get('Link'));
}));
}

One pulls the other, so we can now update the home component of our app. To do that, open the src/app/home/home.component.ts file to import HttpResponse:

import { HttpResponse } from '@angular/common/http';

And now we can update the subscribe() method as follows:

ngOnInit(){

this.apiService.sendGetRequest().pipe(takeUntil(this.destroy$)).subscribe((res: HttpResponse<any>)=>{ 
console.log(res); 
this.products = res.body; 
}) 
}

Go back to the src/app/data.service.ts file to add the following method, which is quite similar to sendGetRequest() with a simple twist of taking the URL to which we need to send an HTTP GET request:

public sendGetRequestToUrl(url: string){ 
return this.httpClient.get(url, { observe: "response"}).pipe(retry(3),       	
catchError(this.handleError), tap(res => { 
console.log(res.headers.get('Link')); 
this.parseLinkHeader(res.headers.get('Link'));
})); 
}

After that, we can go back to the src/app/home/home.component.ts file to define the following method:

public firstPage() {
this.products = [];
this.apiService.sendGetRequestToUrl(this.apiService.first).pipe(takeUntil(this.destroy$)).subscribe((res: HttpResponse<any>) => {
console.log(res);
this.products = res.body;
})
}
public previousPage() {
if (this.apiService.prev !== undefined && this.apiService.prev !== '') {
this.products = [];
this.apiService.sendGetRequestToUrl(this.apiService.prev).pipe(takeUntil(this.destroy$)).subscribe((res: HttpResponse<any>) => {
console.log(res);
this.products = res.body;
})
}
}
public nextPage() {
if (this.apiService.next !== undefined && this.apiService.next !== '') {
this.products = [];
this.apiService.sendGetRequestToUrl(this.apiService.next).pipe(takeUntil(this.destroy$)).subscribe((res: HttpResponse<any>) => {
console.log(res);
this.products = res.body;
})
}
}
public lastPage() {
this.products = [];
this.apiService.sendGetRequestToUrl(this.apiService.last).pipe(takeUntil(this.destroy$)).subscribe((res: HttpResponse<any>) => {
console.log(res);
this.products = res.body;
})
}

And now, to finalize the tenth step we will need to open the src/app/home/home.component.html file to update the template:

<div style="padding: 13px;">
<mat-spinner *ngIf="products.length === 0"></mat-spinner>
<mat-card *ngFor="let product of products" style="margin-top:10px;">
<mat-card-header>
<mat-card-title>#{{product.id}} {{product.name}}</mat-card-title>
<mat-card-subtitle>{{product.price}} $/ {{product.quantity}}
</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<p>
{{product.description}}
</p>
<img style="height:100%; width: 100%;" src="{{ product.imageUrl }}" />
</mat-card-content>
<mat-card-actions>
<button mat-button> Buy product</button>
</mat-card-actions>
</mat-card>
</div>
<div>
<button (click) ="firstPage()" mat-button> First</button>
<button (click) ="previousPage()" mat-button> Previous</button>
<button (click) ="nextPage()" mat-button> Next</button>
<button (click) ="lastPage()" mat-button> Last</button>
</div>

Here we are, at the gate of the final, eleventh, step of our journey.

11.  Building and Deploying the Angular Application to Firebase

Head back to the CLI. What you need is the root folder of the project, as you will need to run the following command there to add the Firebase deployment capability to our project:

ng add @angular/fire

The CLI will prompt you to paste in the authorization code. To paste it in you will need to sign into the Google account, associated with your Firebase account, where you will find the authorization code. After that is done, the CLI will prompt you to select a project, which you do. After that, the command-line interface will create the firebase.json and .firebaserc files and update the angular.json file accordingly.

At this point, we are ready to deploy the application to Firebase by using the following command:

ng deploy

And now, our production is an asset to Firebase hosting, which also concludes the creation of our Angular App altogether, meaning that we have at our hands a crisp new app ready for usage. But every app needs one crucial thing – its own CMS.

How to Create a CMS for Your Angular App

The secret to creating a CMS for your Angular App faster is in using the Flatlogic Platform. There are 5 short steps to build your CMS, each taking less than a minute.

1. Choose a name for your project

This one is pretty self-explanatory.

2. Choose your project’s stack

Choose the stack for the front end first.

3. Choose a design for your CMS

There are five beautiful ready-made designs to pick the one you like the most.

4. Create a database schema editor for your CMS 

There are also a couple of ready-made schemas for you. Or just create a brand-new schema from scratch.

5. Review & generate your CMS

This one is just a measure of assurance, as all you have to do is just review your choices and press the «Create Project» button.

Conclusion

As you can see, the process of creating an Angular App is quite fascinating with all the different little things you have to keep in mind. But what we find most interesting about this whole process is the fact that Angular, despite its initial heaviness, opens a door to endless possibilities in app development once you tame this beast. And with that, we end today’s article on How to Create Angular Apps.

Have a nice day and feel free to read up on more of our articles!

• Free Open-Source CRM Software For Small Business
• AI-Generated Roles and Permissions to Flatlogic Generator
• Decline in Coding: Web App Developers Writing Code Drops to 36.02% in 2024 – [Research Results]
• Exploring the Future of AI Web App Generators
• AI Web App Generator to Make Apps in Minutes

The post How to Create an Angular Application Step by Step [Guide 2024] appeared first on Flatlogic Blog.

Every web project has two sides: the one seen by users and the admin page that its manager uses to control each aspect of each page of said project. To draw a parallel, the user side of the site is our usual beautiful world, and an Admin Page or Admin Console is like the Upside Down from “Stranger Things”, where it is dark and scary, but all the important stuff happens. Or, to draw another analogy, a React-based Admin Page is like the Enterprise spacecraft engine rooms: all the main characters like Captain Kirk and Spock are on the beautiful and well-lit main deck, which would be rendered useless if all the ship’s engineers left the above-mentioned engine rooms. So, the importance of a well-made Admin Page cannot be underestimated if you need your whole project to run smoothly and correctly. But first off, let’s fully understand what a React Admin Page is and how it operates.

What is React Admin

React Admin Page or React Admin Console is, to put it simply, a framework that contains all the information about the site and its content, including information about your products, users, etc. React Admin page also gives you the ability to control everything about the content on your website or app.

In other words, it is the control tool that you use to manage and improve your web project. Thus, it is a tool of great importance able to make or break your business, especially if your specialty is of an e-commerce nature. Don’t get us wrong, we are not telling you this to scare you, but to merely emphasize the significance of creating a React Admin Page worthy of your business.

Before we give you a quick rundown on how to create your own basic React Admin Page, there is only one little question left standing: why use React as a basis for your Admin Page in the first place? React is, no doubt, one of the best bases for an Admin Page. It is easy to create, improve, use, and, most importantly, easy to maintain. This fact renders the decision on what to use as a basis for not only your Admin Page or Admin Console, but pretty much your whole web project preemptively made for you.

That being said, let’s have a look at how to create your own crud React Admin Page in two ways:

1.    By actually sitting down and writing a code, spending so much precious time and effort;

2.    Or by seamlessly and effortlessly creating it with the help of Flatlogic’s Full Stack Web App Generator.

More on seamlessness and effortlessness of option number two later, as now we take a look at path number one.

How to Build React Admin

In order to create your own React Admin Page you will require some preliminary preparations that mainly consist of installing npx, which version would be newer than its eighth iteration, and create-react-app.

With the preliminaries out of the way, your next step is to create a new folder that will contain and store your React Admin Page’s codebase. When that is done, you need to use your preinstalled create-react-app with the following line of coding:

npx create-react-app my-react-admin-page

This line will create a blank React application that will serve as your React Admin Page after we fill it with all the needed innards. Now it is time to install the react-admin package, as well as the data provider that will help us connect to a fake API:

cd my-react-admin-page

npm install react-admin ra-data-json-server

npm start

Now it is time to start working on the above-mentioned React Admin Page innards. Bear in mind that we don’t pay much attention to filling up our frontend with any real data and instead we are going to use an API for testing and prototyping. This will help us by letting us forget about creating custom data providers for now. The first step we are to partake in is replacing the src/app.js element with the next lines of code to set up your React Admin’s default page:

import { Admin } from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';
 
const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');
 
function App() {
return (
<Admin dataProvider={dataProvider} />
);
}
 
export default App;

The next step is setting up the Resource component, which allows you to command react-admin to fetch and subsequently display a user resource. The process is quite simple: your data provider will process the fetch command and display the requested user with the help of the ListGuesser, which takes the data the resource was provided with and tries its best to guess upon the format of the initial data grid. This, subsequently, allows us to use the above-mentioned initial data grid in order to generate our initial list code. And to set the Resource component you will need the following lines of coding:

import { Admin, Resource,ListGuesser } from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';
 
const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');
 
function App() {
   return (
   	<Admin dataProvider={dataProvider}>
       	<Resource name="users" list={ListGuesser}/>
 
   	</Admin>
   );
}
export default App;

Now, in order to customize the mishmash of columns, you will have to look through the table element in your browser and copy the parts you would like to systemize and customize. After that, copy the selected parts into your console by using the inspect element → console chain of commands. The result will look something like this:

export const UserList = props => (
	<List {...props}>
    	<Datagrid rowClick="edit">
        	<TextField source="id" />
        	<TextField source="name" />
        	<TextField source="username" />
        	<EmailField source="email" />
        	<TextField source="address.street" />
        	<TextField source="phone" />
        	<TextField source="website" />
        	<TextField source="company.name" />
    	</Datagrid>
	</List>
);

To sort everything nice and tidy you will need to create a components folder in your src and paste the data in need of sorting into the user.js file. What you get as a result should look as follows:

import { List, Datagrid, TextField, EmailField } from 'react-admin';
 
export const UserList = props => (
<List {...props}>
<Datagrid rowClick="edit">
<TextField source="id" />
<TextField source="name" />
<TextField source="username" />
<EmailField source="email" />
<TextField source="address.street" />
<TextField source="phone" />
<TextField source="website" />
<TextField source="company.name" />
</Datagrid>
</List>
);

Now you can get rid of the unnecessary information. For this example, let’s get rid of the Ids and usernames, as well as disable the phone sorting and change the street address and company name field label with the label prop. Now, this part should look like this:

import { List, Datagrid, TextField, EmailField } from 'react-admin';
 
export const UserList = props => (
<List {...props}>
<Datagrid rowClick="edit">
<TextField source="address.street" label="Street Address"/>
<TextField source="phone" sortable={false}/>
<TextField source="company.name" label="Company Name"/></Datagrid>
</List>
);

At this point, it is time to replace the ListGuesser with the list above in the Resource component. To do that, get back to the App.js and add the following lines:

• import {UserList} from “./components/users”;

• <Resource name=”users” list={UserList} />

And this part of the process is finished. Now you will need to repeat the process to set up your posts. But keep in mind that each post should be connected to its userId to create a reference between a post and the user that created it.

So, let’s get a closer look at this aspect, as the steps of the post set up previous to it are similar to user set up. In order to ensure the correlation between a post and its user-creator, add the following lines:

<p><em>import { Admin, Resource,ListGuesser } from 'react-admin';</em></p>



<p><em>import jsonServerProvider from 'ra-data-json-server';</em></p>



<p><em>import {UserList} from "./components/users";</em></p>



<p><em>const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');</em></p>



<p><em>D</em></p>


<p><em>function App() {</em></p>


<p><em>return (</em></p>



<p><em>&lt;Admin dataProvider={dataProvider}&gt;</em></p>

<p><em>&lt;Resource name="users" list={UserList}/&gt;</em></p>

<p><em>&lt;Resource name="posts" list={ListsGuesser}/&gt;</em></p>



<p><em>&lt;/Admin&gt;</em></p>



<p><em>);</em></p>



<p><em>}</em></p>

<p><em>export default App;</em></p>

To create relationships between the post and the user, you will need to use the ReferenceField component, setting up the foreign key with the source=”userId” prop. After that, you will need to change the list prop for the new posts resource to reference PostList in App.js. To do that, replace the ListGuesser in the post’s resources list prop with the PostList.

The next step in creating your React Admin is to create an edit button to allow content modifications. And the first thing you will need to do here is to add the EditButton component to your Datagrid. The coding for this operation will look like this:

import { List, Datagrid,ReferenceField, TextField, EmailField,EditButton } from 'react-admin';
 
export const PostList = props => (
<List {...props}>
<Datagrid rowClick="edit">
<ReferenceField source="userId" reference="users"><TextField source="name" /></ReferenceField>
<TextField source="id" />
<TextField source="title" />
<TextField source="body" />
<EditButton/>
</Datagrid>
</List>
);

The second thing you will need to do here is to pass an edit prop to your resource. To do that, use the EditGuesser component and pass it to the posts resource in src/App.js. What you need to get is as follows:

import { Admin, Resource,ListGuesser,EditGuesser } from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';
import {UserList} from "./components/users";
import {PostList} from "./components/posts";
 
const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');
 
function App() {
return (
<Admin dataProvider={dataProvider}>
<Resource name="users" list={UserList}/>
<Resource name="posts" list={PostList} edit={EditGuesser}/>
 
</Admin>
);
}
 
export default App;

At this point, the EditGuesser component will generate edits. You will need to take those edits in order and copy them into src/components/posts.js. The whole thing will look like this: 

<export const
PostEdit = props => (
<Edit {...props}>
<SimpleForm>
<ReferenceInput source="userId" reference="users">
<SelectInput optionText="id"/>
</ReferenceInput>
<TextInput source="id"/>
<TextInput source="title"/>
<TextInput source="body"/>
</SimpleForm>
</Edit>

If everything is fine and dandy with this, you will copy and paste the edit code, after which it is time to create the CreatePost component. This component is quite similar to the previous ones with the exception of using two different wrapper components. Here, you will need the Create component.

But that’s not the end of this whole ordeal, as you will need to supply the create prop in the React Admin’s resource as well. In order to do that, you will need to add the PostEdit and PostCreate components into the import. After that, you will need to add them into the posts resource:

<Resource name="posts" list={PostList} edit={PostEdit} create={PostCreate}/>

“That surely must be it. My React Admin is ready!” – you might think. But unfortunately, as we told you at the beginning of this article, writing your React Admin from scratch is an extremely long and winding road. After all, it surely needs authentication, so your API will not be accessible to the general public. What you will need to do in order to add it is to create a new directory and a new file, which will be src/providers/authProvider.js. Your coding for this part should look somewhat like this:

export default {
login: ({ username }) => {
localStorage.setItem('username', username);
return Promise.resolve();
},
logout: () => {
localStorage.removeItem('username');
return Promise.resolve();
},
checkError: ({ status }) => {
if (status === 401 || status === 403) {
localStorage.removeItem('username');
return Promise.reject();
}
return Promise.resolve();
},
checkAuth: () => {
return localStorage.getItem('username')
? Promise.resolve()
: Promise.reject();
},
getPermissions: () => Promise.resolve(),
};

After that the addition of the authProvider={authProvider} prop and the authProvider component in the src/app.js’s admin component would be required:

import authProvider from "./providers/authProvider";

And only now you will have a very crude and extremely basic React Admin that will still require services and backend tinkering and wiring up, but we digress. The main take out of this part of the article should be that this process, also not particularly difficult and somewhat simplified, could be best described as time-consuming.

But what if we told you that you can create a fully functional and stunningly beautiful React Admin Page in under five minutes? Let us introduce you to your new best friend, as we get to the next part of the article! 

How to build React Admin easier with Flatlogic’s Full Stack Web App Generator

When we said that creating a React Admin in under five minutes is possible, we weren’t joking around. It is more than possible with the help of Flatlogic’s Full Stack Web App Generator, which allows you to create ready-made React Admin Pages in just five easy steps. So, take out your stopwatch, and let’s undertake this pleasant little journey together!

Step №1. Choose a name for your React Admin Page

The process of creating a React Admin Page with the help of Flatlogic’s Full Stack Web App Generator is already a thousand times easier than doing it by hand, as one of the steps is not writing or pre-installing anything, but a simple task of choosing a name for you API. After you do it, it’s already time for the second step.

Step №2. Choose your React Admin Page’s Stack

This step is important, but also easy. Just pick the basis for your backend, frontend, and database. For the purposes of this article, we will, of course, choose the React as a frontend option. The rest is all up to you.

Step №3. Choose design for your React Admin Page

This step is visually pleasing, as you get to choose from a number of stunningly beautiful ready-for-usage designs. For our example, we’ve decided to pick the marvelous “Flatlogic” design.

Step №4. Create your React Admin Page’s Database Schema

This step is quite important, as it is the basis for your React Admin Page. But fear not, as it is highly editable and customizable to your project’s needs. For the purpose of this example, we decided that our imaginary project is an E-commerce one and, quite luckily, Flatlogic’s Full Stack Web App Generator has a ready-made database schema just for this purpose. Bear in mind that even though it is ready-made it is still customizable and ready to be tailored to your project’s specialties.

Step №5. Review and generate your React Admin Page

Now we are already at the finish line. All we have to do is just ensure that we’ve chosen everything we wanted and press the majestic “Create Project” button.

After that, just sit back and let Flatlogic’s Full Stack Web App Generator do what it does best. And after a laughably short time, you have on your hands the done and dusted React Admin Page.

Conclusion

Summarizing, it ought to be said that the main goal of this article was simple: to show you how easy and effortless the process of creating such a pivotal part of a web project is, as an Admin Page/App/Console, can be with the help of Flatlogic’s Full Stack Web App Generator. And we are absolutely sure that this goal can be achieved without any hitches. Now you don’t have to spend the valuable and precious time of you and your colleagues on this important task, but instead, you can do it in a jiffy. Finally, thank you for spending your time on this article that we hope you have found really helpful. Have a nice day and, as always, feel free to read up on more of the articles in our blog!

The post Building React Admin Step By Step appeared first on Flatlogic Blog.