I have been working in JavaScript area for over five years, and in those years I have come across various different problems and implemented solutions for them. I have also studied JavaScript extensively and used many of open source libraries. My aim with this gist is to share my knowledge with you. In this gist I will be sharing many different useful resources which I have used and studied over the years.
- Design system
- Front-end libraries
- General purpose libraries
- Back-end libraries
- Unit test cases libraries
- Frameworks
- Style Guidelines
- Books
- Architecture notes
Desing systems are very important and play a vital part in project development. They are especially very important when you are starting a project. There are many options available on design system. I am going with following because these are four I have used and worked with.
Hands down my favorite design system. That’s' why I a listing it first. If you want to use a design system which is feature rich and provides almost all of the components. Just go ahead and use Ant Design. It also very different than the traditional system like material UI and bootstrap and using it gives your application a fresh look.
Good things about it:
- Number of components: This is its core feature. No other design system comes even close to this regarding number of components. It provides you with so many feature rich components. You will hardly ever need any other third party ui component library with it.
- Documentation: One of the easiest documentation I have ever read. It contains complete examples along with extensive demos and explanation.
- Ease of use: It’s very easy to use
- Extensible: Very easy to extend, almost all the components can be mixed with each other to achieve required behavior.
- Icon support: It supports react-fa and react-icons library
- Customizable: It provides you with basic theme out of the box and also let you create/customize themes.
- Community support: It is one of the most widely used design system, it comes with huge community support. You can navigate their GitHub repo to find help on issues which you are facing.
- Other utility libraries: Over the year it has grown from just providing you with UI components. It has provides many other utility libraries which you find on their side project called react-compoenents. I will take more on this in our UI libraries section.
install npm install --save antd
git Link
documentation Link
One of the most popular design system out there. It is based on google's material design principles. I started using it when it was in its version 0.xx. Version had many issues and it has come a long way with ever since.
Good things about it:
- Ease of use: It’s very easy to use
- Extensible. Almost all the design systems claim to be extensible but only few are. This is one of the few which is extensible
- Customizable: I absolutely love this feature. As it is based on google material design system it comes with many different themes. You can easily customize its theme and create your own.
- Good community support: It has huge amount of community support. If you face any issues chances are you can get community support from their github issues Number of components: It has almost all the components which you are ever going to need in your project. Documentation: Its documentation is very good. All the components documentation come with example and detail description of their properties/functions. Furthermore they have divided documentation into two sections one for demos and other for component APIs documentation
- Icon support: It includes the entire material UI icons out of box.
install npm install --save @material-ui/core
git Link
documentation Link
If you like microsoft application's look and feel, then this is go to design system for you. This is maintained and open sources by microsoft.
Good things about it:
- Easy to use: Like others it’s also very easy to use:
- Extensible: Unlike other microsoft's products this is one which is extensible by nature. If you need custom behavior on any components you can easily customize it
- Customizable: Previously it was not easy to create/customize themes. Now they have added a new package called @uifabric/fluent-theme
- Number of components: Like ant design its extremely rich in number of components. If you decide to go with this design system you will find almost all the components you will ever need for you project.
- Community support: It’s not as popular as other design systems. But it has fair amount of community support, plus microsoft team is actively maintaining it, so chances are you can get help from them.
install npm install --save office-ui-fabric-react
git Link
documentation Link
It is based on one of the oldest and widely used design system bootsrap. It provides almost all of the features provided by bootstrap.
Good things about it:
- Easy to use: If you are comfortable with bootstrap, you will be pretty comfortable with it in no time.
- Extensible: Like its parent(bootstrap) it has extensibility built in.
- Customizable: It provides bootstrap themes. If you want to create your own theme you can create one with some effort.
- Number of components: Not as compoenent rich as its peers, but it provides all the features parent bootstrap.
- Community support: It has decent amount of community support. But not as much as other desing system.
install npm install --save react-bootstrap
git Link
documentation Link
Over the years I have used many design systems. I have used them on large scale projects and small projects as well. But one thing which I always felt my application code is completely tied to them, and I also felt most of the time I am fixing problems which are coming from design systems rather than doing actual development. Plus If your application is fairly large your design system might make your application slower. This is where bulma excels, it is dependency free, open source CSS framework based on Flexbox. Yup you heard that right, just plain simple CSS only framework. You will have your work design system agnostic and dependency free
Good things about it:
- Ease of use: It’s very easy to use, just based on CSS you are free to use your imagination and you own structure.
- Extensible. As compare to other design system, this one is just based on CSS you can extend mold it and change it according to your requirement
- Good community support: It has huge amount of community support. If you face any issues chances are you can get community support from their github issues
- Number of components: It provides fairly good amount of components out of the box, rest you can create pretty easily using its css.
- Documentation: Its documentation is very good. All the components documentation come with example and detail description of their properties/functions. Furthermore they have divided documentation into two sections one for demos and other for component APIs documentation
- Zero dependency: The only design system with zero dependency feature.
install npm install --save bulma
git Link
documentation Link
Over the years I have worked with/discovered many excellent libraries. Some of them are:
If you want to position something this is the best solution in react, for example creating tooltip and rendering component with required placement settings. Fair warning its documentation is horrible.
install npm install --save react-popper
git Link
documentation Link
It’s for all your animation needs. If you don't want to spend too much time on creating animation from scratch then this library is your friend. It covers almost all of your animation needs
install npm install --save react-motion
git Link
Another great option for your animation needs. Its easier to use than react-motion and comes with excellent documentation
install npm install --save react-spring
git Link
documentation Link
I don't think this requires any introduction. It goes hand to hand with react application. The best available option for routing in your application
install npm install --save react-select
git Link
documentation Link
It is the state management library for react. It is one of the finest state management libraries to be used with react. It has huge community support and comes with many supportive third party libraries.
install npm install --save redux
git Link
documentation Link
If you want your form state to be managed by redux and you want to manage your form lifecycle including submit and error handling then this maybe the best solution for you. It also comes with awesome documentation and integration with other UI design systems such as material ui, bootstrap etc.
install npm install --save redux-form
git Link
documentation Link
If your desing system does not provide with search and selectable dropdowns then react-select to the resuce. One of the most robust and easy to use select box for react. It also have extensive documentation.
install npm install --save react-router-dom
git Link
documentation Link
It is a React library to create a HTML5-compliant drag'n'drop zone for files.
install npm install --save react-dropzone
git Link
documentation Link
This is a nice little library, which gives svg powered component loader which you can use in your system. You may have seen them in youtube, facebook and many more
install npm install --save react-content-loader
git Link
This is one of the most handy library I have ever used. It lets you create html forms from JSON schema. It has many usefull use cases. One being dynamic UI. If you want to render forms dynamically you can use it to accomplish it.
install npm install --save react-jsonschema-form
git Link
documentation Link
If you need scheduling like google or outlook this one does it for you. It is based on parent library fullcalender. It has many features which you need for scheduling and keeping notes for appointment
install npm install --save fullcalendar-react
git Link
documentation Link
This one is another equally good option for scheduling calander. It also supports many features for scheduling and keeping notes for appointments
install npm install --save react-big-calendar
git Link
documentation Link
A React utility belt for function components and higher-order components.
install npm install --save recompose
git Link
documentation Link
It is a JavaScript module that can be used to include Google Analytics tracking code in a website or app that uses React for its front-end codebase.
install npm install --save react-ga
git Link
documentation Link
A simple JavaScript utility for conditionally joining classNames together
install npm install --save classnames
git Link
documentation Link
Very simple library for having you css in your js.
install npm install --save glamor
git Link
documentation Link
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation.
install npm install --save aphrodite
git Link
documentation Link
Runtime type checking for React props and similar objects.
install npm install --save prop-types
git Link
documentation Link
During project development you need libraries which help you accomplish things such as configuration, performing utility functions such as date manipulation, filtering... This section will introduce you to some of the best libraries to accomplish such tasks. Note: Some libraries can be used on both front-end and back-end some can only be used on one side.
One of my favorite library for performing filtration on arrays. It provides mongodb filtration on JavaScript array. It supports almost all mongodb operations as well as mongodb operators.
install npm install --save sift
git Link
documentation Link
It is a superset of almost all the utility functions on JavaScript. If you need to merge two objects, need union of arrays, need to work on string.. This one is for you. It is one of the most used JavaScript utility library out there.
install npm install --save lodash
git Link
documentation Link
It is a subset of lodash. If you are only looking for some of utils then go for this. It comes with good documention and offers examples as well.
install npm install --save underscore
git Link
documentation Link
For all your environment variables needs. Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env.
install npm install --save dotenv
git Link
documentation Link
Most Windows command prompts will choke when you set environment variables with NODE_ENV=production like that. (The exception is Bash on Windows, which uses native Bash.) Similarly, there's a difference in how windows and POSIX commands utilize environment variables. With POSIX, you use: $ENV_VAR and on windows you use %ENV_VAR%.cross-env makes it so you can have a single command without worrying about setting or using the environment variable properly for the platform. Just set it like you would if it's running on a POSIX system, and cross-env will take care of setting it properly.
install npm install --save cross-env
git Link
documentation Link
It provides sereach funtionality on Json objects. It syntax is similar to xPath syntax. You can build and xPath and supply it to this it will return you the relevant object/property from Json object.
install npm install --save json-path
git Link
documentation Link
A utility belt library for working with JSON objects. It provides method such as get/set/remove etc, to make working with JSON objects easier
install npm install --save json-pointer
git Link
documentation Link
Ever had the urge to parse XML? And wanted to access the data in some sane, easy way? Don't want to compile a C parser, for whatever reason? Then xml2js is what you're looking for!. Its a Simple XML to JavaScript object converter
install npm install --save xml2js
git Link
documentation Link
It is a simple parser for converting xml to json. It uses node-expat internally. Be sure to install it first before using this library.
install npm install --save xml2json
git Link
documentation Link
The date library for JavaScript. It is data library form parsing, validating, manipulating and formatting dates.
install npm install --save moment
git Link
documentation Link
A worthy mention here. Node.js comes with its own util module. This module provides many useful features. Such as util.TextEncodes, util.types, util.callbackify, utill.promisify etc. I highly recommended checking this module and using this in project.
documentation Link
I was fortunate enough to be part of large application; I got the chance to work on many different micro services and on their integration. Following are some of the libraries which I used on back-end projects:
Today, almost every application has to be connected and to share data with other applications. The best way to do that is through APIs. For a long time there hasn’t been any industry standard for designing and documenting APIs. And API without a good documentation on how to use it, is useless. Because of that, developers have worked hard to create a standard way of describing APIs and documenting them. One such proposal is Swagger.
Swagger definition from swagger website
Swagger is the world’s largest framework of API developer tools for the OpenAPI Specification(OAS), enabling development across the entire API lifecycle, from design and documentation, to test and deployment.
The best combination is to create rest based express server and add swagger-ui for documentation.
install npm install --save swagger-ui
git Link
documentation Link
It is a middleware that validates the body, params, query, headers and cookies of a request and returns a response with errors; if any of the configured validation rules fail
install npm install --save express-validation
git Link
documentation Link
Its simple node.js request body parser. Simply parse incoming request bodies in a middleware before your handlers, available under the req.body property. It is very useful way of parsing of your incoming requests, get body data, query parameters and validations on your request data.
install npm install --save express-validation
git Link
documentation Link
A Node.js module for parsing form data, especially file uploads. It is specifically built for handling file uploads. It can handle file upldoads of hundreds of GB. It has been battle-tested against GBs fo file uploads from a large variety of clients, hence the name 'formidable'
install npm install --save formidable
git Link
documentation Link
DataLoader is a generic utility to be used as part of your application's data fetching layer to provide a simplified and consistent API over various remote data sources such as databases or web services via batching and caching.
install npm install --save body-parser
git Link
documentation Link
Cron is a tool that allows you to execute something on a schedule. This is typically done using the cron syntax. It allows you to execute a function whenever your scheduled job triggers. It also allows you to execute a job external to the javascript process using child_process. Additionally, this library goes beyond the basic cron syntax and allows you to supply a Date object. This will be used as the trigger for your callback. Cron syntax is still an acceptable CronTime format. Although the Cron patterns supported here extend on the standard Unix format to support seconds digits, leaving it off will default to 0 and match the Unix behavior
install npm install --save cron
git Link
documentation Link
It is one of the most widely used npm package. At the time of writing this it has over 14 million downloads. It is simple way to make http calls. It supports HTTPs and follows redirects by default. It supports everything including but not limited to streaming, promises, forms HTTP authentication... It is my default library for http calls.
install npm install --save request
git Link
documentation Link
Same as request it is one the most used npm pacakge. It is promise based HTTP client for both browser and node.js
install npm install --save axios
git Link
documentation Link
winston is designed to be a simple and universal logging library with support for multiple transports. A transport is essentially a storage device for your logs. Each winston logger can have multiple transports (see: Transports) configured at different levels (see: Logging levels). For example, one may want error logs to be stored in a persistent remote location (like a database), but all logs output to the console or a local file.
winston aims to decouple parts of the logging process to make it more flexible and extensible. Attention is given to supporting flexibility in log formattin, and ensuring those APIs decoupled from the implementation of transport logging (i.e. how the logs are stored / indexed) to the API that they exposed to the programmer.
install npm install --save winston
git Link
documentation Link
Mongoose is a MongoDB object modeling tool designed to work in an asynchronous environment. It is very extensible and you can use many different plugins with it.
install npm install --save mongoose
git Link
documentation Link
Sequelize is a promise-based Node.js ORM for Postgres, MySQL, MariaDB, SQLite and Microsoft SQL Server. It features solid transaction support, relations, eager and lazy loading, read replication and more.
Note: While this is a great library but it comes with some of the most annoying issues. Some of them are:
- It supports association but update does not work for association, you have to update models separately.
- There is limited documentation for complex scenarios, different options provided by sequelize are not properly documented nor their use cases are explained. You have to spend much of time understanding them and doing hit and try.
install npm install --save sequelize
git Link
documentation [Link](http://docs.sequelizejs.com/
jsdom is a pure-JavaScript implementation of many web standards, notably the WHATWG DOM and HTML Standards, for use with Node.js. In general, the goal of the project is to emulate enough of a subset of a web browser to be useful for testing and scraping real-world web applications.
install npm install --save jsdom
git Link
documentation Link
I have been doing TDD for past couple of years. I still am novice at it, but I understand and deeply appreciate the benefits of TDD. Over the course of doing TDD I have comes across many useful testing libraries. Here are some of them which I am hoping will help you as they helped me
Never have I ever loved a library as much as this. I absolutely loved working with it and never faced any issues. It’s Simple, flexible, fun JavaScript test framework for Node.js & The Browser
install npm install --save-dev mocha
git Link
documentation Link
Enzyme is a JavaScript Testing utility for React that makes it easier to test your React Components' output. You can also manipulate, traverse, and in some ways simulate runtime given the output. It is open sourced by airbnb and most of the libraries e.g. react, material-ui they all use this as their unit test library. It also comes with many many third party adapters which you can use to address most of your testing needs.
install npm install --save-dev enzyme
git Link
documentation Link
Chai is a BDD / TDD assertion library for node and the browser that can be delightfully paired with any javascript testing framework. I have used it on node as well as on browser side
install npm install --save-dev chai
git Link
documentation Link
Jest is unit test cases runner framework from facebook. You can use it as an alternative to mocha. Some of its core features are
- Developer Ready: Complete and ready to set-up JavaScript testing solution. Works out of the box for any React project.
- Instant Feedback: Failed tests run first. Fast interactive mode can switch between running all tests or only test files related to changed files.
- Snapshot Testing: Jest can capture snapshots of React trees or other serializable values to simplify UI testing.
install npm install --save-dev jest
git Link
documentation Link
It provides a high-level abstraction for testing HTTP, while still allowing you to drop down to the lower-level API provided by superagent.simply put doing unit testing for back-end APIs
install npm install --save-dev supertest
git Link
documentation Link
My absolute favorite library for solving unit test cases pains. It provides standalone and test framework agnostic JavaScript test spies, stubs and mocks.
install npm install --save-dev sinon
git Link
documentation Link
Another favorite of mine. It lets you override external dependencies in your code. So you can only focus on writing unit test cases for you module, without changing the code.
install npm install --save-dev proxyquire
git Link
documentation Link
One of the things I put most emphasize is coding styles. I always put forward a documents listing all the style guidelines such naming convention and stuff before starting a project. Having a consistent format across the board improves the consistency and make a project easy to read and maintain
I recommend to using library for coding style guidelines
It is the complete guidelines for JavaScript. It has different section for JavaScript, React, CSS in JSS. Go to your relevant section and follow the standards recomended
git Link
I highly recommend you to read Clean Code by Robert C. Martin. This github repo can be good reference if you need some quick resource to structure your code properly. It adopts all the engineering principles from book to JavaScript
git Link
I am big fan of learning from books. I strongly believe you can learn much more deeply from a book than any other medium. I am also a firm believer in learning. I believe you never stop learning. Thats why from time to time I see myself lacking some knowledge and for that I look towards books. I am a strong adovcate of learning fundamentals, because when you know fundamentals deep you work will be good and you can solve problems by language itself rather using third party libraris or copy pasting code from stackoverlfow.
Most of the language learning books which I am listing here are for JavaScript
This is the first I have read on JavaScript. I read this book back in 2014. I absolutely loved this book, It gives basic knowledge of inner working of language
Author Nicholas C. Zakas
This book teaches you everything you need to know about latest editions in JavaScript. It gives you overview of all the new advancements without going into too much detail about them
Author Nicholas C. Zakas
If there is one complete and most authentic book series available for you, this is the one. It consists of six beautifully written books. I have read all of them and learned from each one of them.
It does justice to its title, when you read this book you will get many light bulb moments and during reading you will realize you actually don't know JS as well as you thought
Author Kyle Simpson
git Link
I am big fan of functional programming and being fan of JavaScript I never quite get around on learning functional programming. Because I could never find any good resource for it, till I stumble upon this one. As You don't know JS book series this book is also quite amazing, it teaches you everything you need to know about JavaScript `"Functional-Light JavaScript" explores the core principles of functional programming (FP) as they are applied to JavaScript. But what makes this book different is that we approach these principles without drowning in all the heavy terminology. We look at a subset of FP foundational concepts that I call "Functional-Light Programming" (FLP) and apply it to JavaScript.
Note: Despite the word "Light" in the title, I do not consider or recommend this book as a "beginner", "easy", or "intro" book on the topic. This book is rigorous and full of gritty detail; it expects a solid foundation of JS knowledge before diving in. "Light" means limited in scope; instead of being more broad, this book goes much deeper into each topic than you typically find in other FP-JavaScript books.`
Author Kyle Simpson
git Link
The Node Craftsman Book helps JavaScript programmers with basic Node.js knowledge to now thoroughly master Node.js and JavaScript. This book dives you deeper into the craft of software development with Node.js and JavaScript, incuding object-orientation, test-driven development, database handling, web frameworks, and much more.
Author Manuel Kiessling
This books teaches about principles, patterns and practices of writing clean code. After reading this book you will have much deepers understadning of how to structure your code properly where everything should fit and many things more
Author Robert C. Martin
"This is serious book about domain modeling in software design. Software development society lives from one hype wave to another. OOP, patterns, XP, TDD, CI/CD, BigData, DevOps - this is just to name few. This book is originated from golden age of OOP. The author admits that object oriented paradigm is not the only one available but the bias toward OOP/OOD is obvious (and justifiable). This book tells about how to do the modeling of core software components “the right way”. With fast pace of modern software development, it’s easy to forget that the main part of software value is in its “brains”. You can change GUI technology or infrastructure layer. You even can totally rewrite your application but the application domain stays more or less the same and at the end of the day the model defines whether this software is useful or not. I can say that this book is targeting architects, domain experts, business analysts (and I believe these professionals are the main audience) but this would be the usual fallacy of separating software developers into first and second class. So I say the opposite – if you want to transcend from craft of software development to its art you should read this book." Top review from Amazon
Author Eric Evans
This is a modern take on architecture. This book focuses on Microservices architecture and teaches you how to architect your large distributed projects. Author also refers to above book many times, I recommend you to read above book before reading this one, but it is not required.
Author Sam Newman