npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

backflow

v0.2.6

Published

A package to easily write backend code. Some stuff is already taken care off.

Downloads

617

Readme

Theory

  • To understand the basics of technology used to write the code NodeJs

  • How we import files & modules are mentioned here Modules.

  • When we clone project from Github repo. It may be of different version. To manage versions NVM

  • Details of packages that used in current project are mentioned in Package.json

Setting up Environment

1. Start the project & do the necessary paperwork.

npm init

2. Install the package backflow. Which contains folder structure & necessary templates & functions.

npm i backflow

3. After downloading , use ES-6 syntax. So, set "type":"module" in package.json.

4. Cut the readME file from node_modules & make a .gitignore file.

Patterns in Web development

  • 1. MVC architecture

It is a model view controller architecture. In which models handles data , views shows data , & controller handles requests.

  • Initialize project & make a server

npm init
npm i express
  • Set path of views , view engine , layout for views. Views files have extension .ejs.

npm i ejs
server.set('view engine', 'ejs') ;
server.set('views' ,path) ;
server.use(ejsLayouts) ;
server.use(express.static('public')) ;
  • Now , you have to make models & controllers, inside features folder.

  • To use the controller functions in GET, POST or other requests. We have to use the instance of the class ( if function is not static)

  • Inside controller functions , we use model functions to do CRUD operations on data.

  • One type of feature may have multiple functions inside controller . To avoid mess in single index.js file . We can use route.js file to place all requests there.

  • If controller is using this keyword inside constructor , then we cannot call function of controller directly instead we have to use arrow function.

router.post('/signin',(req,res)=>
{
    userController.signIn(req,res) ;
}) ;
# How these work actually ?

- ### When user sent the another request to server. Server dont know that it is the same user. 
- #### So , what server does is they make a session-id & sent back to user in cookies.
- #### When user sent another request , this session-id is automatically fetched from cookies

package used = npm i express-session
  • 2. RESTful API

    • Use try catch block to catch(err) errors

try{}
catch(err)
{
throw new ApplicationError('error-message' , code) ;
}
  • 3. Micro-services architecture

# Understanding this package

  • 1. Use of each & every folder is listed here.

    • a-databaseConfig This contains files that makes connection with database .

    • b-loggedData This contains files that are logged in server.

    • b-public This contains static & dynamic files that server will serve as per request from user.

    • c-uploads This contains all the files that are stored on server , that user uploads on network.

    • d-middlewares This folder contains middlewares that does the work of processinig requests before they came to server.

    • e-modules Most important folder which contains all modules used in the application.

    • f-useful-functions This folder contains functions that I made , which makes the task easy to do.

    • g-events Nothing just notes of events.

    • h-features This folder will be different for each application as per the task.

  • 3. Each folder contains files that you can use as examples to know . How to write code ?

# Create Project

  • 5. Go on index.js & read it.

    • First you have to make a server.

    • Then you have to make a folder for dynamic files(views) & static files and give them path like views & for static.

    • Now to embedd javascript variables in views & for common templating of views. Use view engine & ejsLayouts.layout.ejs.

  • Views these are dynamic files like HTML , that serves dynamic content based on user request. Extension used is .ejs.

  • Forms are also metioned in layout.ejs , Default enctype for form is urlencoded . But we can modify it to use multipart/form-data for files.

  • Every data that is sent is recieved in req.body. But if data is multipart than it is recieved in req.file.

  • Now you can make controllers , models & views and thats it.

  • Last stepYou can delete the unnecessary folders & modules in the end.

Start Server

  • 4. Server.js This is the file that ultimately runs.

    • It is possible that there are lots of server on single machine. To connect with particular one , we need port Number.

    • Starts the server.

node server.js

# alternate
nodemon server.js

API Notes

  • We use swagger for this purpose.

Testing

  • Run the PostMan.

  • Fill the URL & choose the request.

  • Data can be sent in various formats in req.body.

    • form-data

    server.use(multer.any()) ;
    • form-urlencoded

    server.use(bodyParser.urlencoded({extended: true})) ;
  • Data could be sent to server in URL in form of params & query

<!-- Params -->
server.get('/dynamicRoute/:id',(req,res)=>
{
    const {id} = req.params ;
    res.send(id) ;
})

<!-- Query -->

React application

  • React does not directly does changes in DOM . But it makes a virtual DOM first.

  • Then it compares virtual DOM with real DOM and paints only that nodes which changes.

  • Components in react are made using functional or class-based.

Component properties

  • Regular javascript function returnin jsx. JSX always enclosed in () parenthesis.

  • Name starts with Capital letter.

  • Instead class className is used.

  • variables are enclosed in { }.

  • We cannot use if-else inside jsx. But we use ternary operator or || , && . As condition is about uncertainity, it also consider as variable and enclose in parenthesis.

  • In case of && , if there are multiple conditions. this returns first: falsy part.

  • In case of || , if there are multiple conditions. This returns first: truthy part.

  • Only 0 , null , "" , undefined, false consider as false . Everything is true other than these.