DEV Community: deveshprojectwork

Difference Between Angular and React

deveshprojectwork — Mon, 31 Aug 2020 12:07:24 +0000

Angular vs React – Difference Between Angular and React
If you are a web developer and stumbling around which platform should you choose for your next project, Angular or React? Then, you are at the correct place. Also, if you are a beginner in web development, you will surely come across with Angular and React soon.

In this article, we are going to discuss what Angular and React is? What are their key differences, similarities, and various other factors to get a better understanding.

So, let’s get started.

What is Angular and React?
Angular is a complete structural framework for development of dynamic web pages and web applications. It is a JavaScript framework developed and maintained by Google that is written in Typescript. Angular is a complete rewrite of Angular JS which was introduced in 2010. Also, Angular has a different syntax format and instead of controllers it uses a hierarchy of components for its architecture.

React popularly known as React.js or React JS is an open source JavaScript library developed and maintained by Facebook. It is basically used for developing single page or application as it can fetch rapidly changing data and record them. It was introduced in 2013 and was described as a JavaScript library for building user interfaces.

Both Angular and React frameworks are developed and available under MIT license.

Angular vs React
Angular vs React - Difference Between Angular and React

Architecture
Angular and React both have many similarities and differences. If we compare Angular with React, then we see that Angular is completely a MVC (Model View Controller) framework as it helps in building the structure of application but React is just a JavaScript library – only the view.

On the other hand, React gives you complete flexibility for choosing any of your own library as you wish to. In addition, it also provides JSX and XML templates instead of just classic templates as in Angular.

Angular does not gives you much flexibility as React. You have to only use what angular provides.

Data Binding
This is one the major differences between Angular and React. Angular uses two-way data binding while React uses one-way data binding.

Let me explain you by a simple example – In two-way data binding, if a user input changes than the state of the model changes as well. And if you change the state of model then the corresponding input changes. This is how two-way data binding works.

React uses one-way binding. In this first we have to update the model state and then only we can change the user input. However, if we change the user element it will not affect the model state.

Parent Technology
Angular uses Typescript language while React uses JavaScript language. Both languages are different in a way that JavaScript is a dynamic language rather than Typescript which is static language.

In JavaScript we don’t have to define the variable type like string, char, int etc. It dynamically allocates memory to the variable. While in Typescript, we have to statically define the variable type.

The Angular uses Typescript as it provides smooth transition for programmers.

DOM (Document Object Model)
Angular uses regular DOM in comparison to React which uses Virtual DOM. Virtual DOM helps in increasing the speed of changing and updating the data without changing the structure.

While on the other hand in regular DOM, the whole structure needs to be updated until we reach the data that needs to be updated. This leads to slow performance of Angular than React.

Difference Between Angular and React
Basis Angular React
Developed By Google Facebook
Platform Complete MVC framework for building web pages and applications JavaScript Library for developing single page
Templates HTML templates JSX, XML templates
Data Binding Uses two-way data binding Uses one-way data binding
DOM Regular DOM Virtual DOM
Language Used Typescript JavaScript and JSX
Flexibility Only Angular tools can be used Provides option to choose any templates
State Management No need of Redux until the requirement is high enough Redux is used for state management
Google Trends
According to google search trends React is more popular than Angular. The does not mean Angular is not good, both have there own advantages and disadvantages.

Final Thoughts

Both Angular and React are widely used by professional developers, businesses, and various other companies worldwide. Angular is a complete framework and has always gained popularity since its release. And same applies on React too, but its not a framework rather it’s just a library to view.

React and Angular are two different things, but still they both are compared because they are the most widely used technology for developing web pages and applications. React has some amazing features, that’s the reason it is compared to Angular.

8 React Application Deployment and Hosting Solutions for 2020

deveshprojectwork — Mon, 31 Aug 2020 10:21:18 +0000

    * 1. Firebase Hosting
    * 2. Github Pages
    * 3. Netlify
    * 4. Heroku
    * 5. Now
    * 6. Surge
    * 7. AWS S3
    * 8. Roast
    * Conclusion

Useful solutions for deploying and hosting your React applications in After working in your development environment and playing around with localhost, you most likely would need to build out your react application to become production ready and deploy it for everyone to experience the react goodness in their local machines too. In this article, we would look at a number of options to developers quickly pick from to deploy their react applications.
Useful tip: Bit helps your team collaborate on shared components. Each component can be independently developed, tested and used across your apps. Bit handles the entire lifecycle of each shared component so you can focus on building great apps.
Share reusable code components as a team · Bit
Easily share reusable components between projects and applications to build faster as a team. Collaborate to develop…
bit.dev

1. Firebase Hosting

Firebase Hosting is part of the many services Google’s firebase offers like authentication, storage, cloud functions and even database. This is basically a static site hosting that would be perfect for any frontend react application, it also supports SSL, CDN and custom domains.
To use firebase hosting:
§ Ensure you have a google account
§ Login to Firebase Console
§ Create a project
§ Navigate to the hosting tab and click get started.
After this, you proceed to install firebase cli on your terminal with this line of command:
npm install -g firebase-tools
This would install firebase tools globally and you can now deploy using these commands sequentially in your terminal:
// cd to your project folder
firebase init firebase deploy
Firebase would deploy your application to yourProjectName.firebaseapp.com

Github Pages
React applications by default when you build out for production gives you github pages as a great deployment option. Github pages is a deployment service by github that builds and deploys your react application straight from the application repository with a smooth git integration, it is such a breeze to use. When you run:
yarn build
React builds out your application for production and afterward shows you a suggestion if you choose to use github pages. Copy the homepage description given, it would look like this:
“homepage” : “https://yourgithubname.github.io/yourreponame",
Add it to your package.json file, then re-run the build command:
yarn build
Go to the package.json and add a new line under scripts
“deploy”: “gh-pages -d build”
Then deploy with oneline of command:
npm run deploy
Open the homepage on your browser and see the react application is live.
Netlify
Deploying with Netlify is one of the the trendiest ways to put your react application out in the universe. Netlify provides a very stress-free and easy-to-use interface where you literally just click and select options and configure deployments and build your app from a development environment from a repository like github, you can even test deploys and also get support for A/B testing from the same user interface.
To get started:
§ create a netlify account
§ login to the created account
§ click new site from git on the top right corner.
§ choose github (if that’s where your project is)
§ follow the prompt to add navigation and test deploy
§ hit deploy site button
This can be achieved manually too in your terminal with a few commands
npm install netlify-cli -g netlify deploy
And you would have a netlify.com project deployed successfully.
Heroku
Heroku, an industry leading cloud-platform-as-a-service that handles a number of cloud based operations which includes building, managing and deployment of applications is a great place to start deploying your react application. If you wish to use create-react-app to build out your react application, here is an easy way to deploy it on heroku:
§ create a heroku account
§ login to the created account
You can now open your terminal and run the following commands below:
npm install -g create-react-app
create-react-app my-app
cd my-app
git init
heroku create -b https://github.com/mars/create-react-app-buildpack.git
git add .
git commit -m "react-create-app on Heroku"
git push heroku master
heroku open
After this, you have successfully deployed your react application, check your dashboard for the application link.
Now
Ziet’s Now is a revolutionary serverless deployment service for various kinds of applications including react applications all the way to node applications. It provides a very robust support for the CLI also and it is smoothly integrated with github. To get started:
§ install now desktop here (it ships with the cli tool)
alternatively use npm:
npm install -g now
§ Create a new account on now
§ Login with the newly created account.
To deploy a react application, navigate to the root folder of your built project and run the now command in the terminal:
now --name your-project-name
A now.json file should appear in the root folder looking like this:
{
"version": 1,
"type": "static",
"static": {
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
Follow the prompt and you will successfully deploy your application.
Surge
Surge is a very popular hosting service for static applications like react applications tastefully targeted at frontend web developers. The free plan supports custom domains, making it a really great option for deploying react applications. To get started:
§ install surge using npm
npm install -g surge
§ build out your react application
cd your-react-project npm run build
§ navigate to build folder
cd build
§ run surge
surge
Follow the prompt and you will be given a surge url where your react application is live at.
AWS S3
Amazon web services has a suite of cloud services to support every single part of software development cycle. They have a couple of services for deployment of web applications and S3 is one of the less complicated one to use. It is often said that a lot of amazon web services sacrificed simplicity of getting started for flexibility of usage. There is however a cli tool built by a community member for easily deploying your react application to the amazon s3 service called s3cmd. To get started:
§ sign up to aws services
§ login to the created account
§ open an s3 bucket according to your preferable data point/center
§ Download s3cmd here
Note: Amazon web services has an AWS CLI tool but we are using the s3cmd tool in this article
Alternatively, if you have homebrew, you can install with this line of command:
brew install s3cmd
You need the access keys of the bucket for the next step. To get the keys lookup this guide.
When you have gotten the keys, run this line of command to use them:
s3cmd --configure
when prompted, paste in the keys you already got. We go ahead to list all our buckets with this command:
s3cmd ls
Now let us build out ur react application
yarn build
To synchronise the build folder with our s3 bucket, we run this:
s3cmd sync LOCAL_DIR s3://BUCKET[/PREFIX]
And your react application would be automatically deployed to your s3 bucket successfully. After making any changes, just re-run the following commands:
yarn builds3cmd sync build/* s3://reactApp
To make it even a little easier, you can add these commands to your package.json file so that you can run it all like a yarn command
"build-deploy":"yarn build && s3cmd sync build/* s3://reactApp && echo 'Deployed Successfully' "
Roast
Roast is a content delivery network static web host you can use to deploy your react applications. It is built with speed and simplicity in mind with provisions for https and full-page server-side render. To get started:
§ Create an account on roast here
§ login with your new account.
§ Install the Roast CLI tool
npm install -g roast
Then build out your react application:
yarn build
Add a _redirects file. See a guide here. When that is done, you can deploy your react application by running a line of command:
roast deploy
You would see your react application live with a roast url.

Conclusion
In this article we took a good look at some easy options react developers should know they have when it comes to deployment of their react applications. You can finally just take that new step of stepping out of the localhost comfort zone and deploy your application for the world to see too. Happy Coding! 👏

Rail Setup

deveshprojectwork — Thu, 30 Apr 2020 19:26:02 +0000

  ## Rail Setup
    $ rails new <app>
    * $ bundle update - this will update the GEM, already created in first command
    $ rails generate scaffold username:string password:string
           1. $ rails generate scaffold recipe
    $ rake db:migrate RAILS_ENV=development
    $ rails db:migrate - run the script on the local server
    $ rails new <app>
    $ bundle update - this will update the GEM, already created in first command
    $ rails generate scaffold username:string password:string
    $ rails generate scaffold recipe
    $ rake db:migrate RAILS_ENV=development
    $ rails db:migrate - run the script on the local server

    $ Inside HTML
      <% tweet = Tweet.fin(1) %>  this will not be shown on the HTML
      <h1><%= tweet.status %></h1>  this will print on the HTML screen

    $ layout 
      to the /app/views/layouts/application.html.erb/
      <html>
          <body>
            <%= yield %>   {this will take all the other page &rest layout }
          </body>
      </html>


  ### Chapter 1 <a name="chapter-1"></a>

Scaffold

    * $ rails new <app>
    * $ bundle update - this will update the GEM, already created in first command
    * $ rails generate scaffold username:string password:string
    * $ rails generate scaffold recipe
    * $ rake db:migrate RAILS_ENV=development
    * $ rails db:migrate - run the script on the local server

Change to Config/routes.rb by -:

Destroy Scaffold & Text Genration

    $ root to: 'users#index'
    $ get 'about', to:'pages#about'
    $ $ rails -s -: run the application

    $ rails destroy scaffold <app> or rails d scaffold books - Destroy
    $ rails generate controller pages index contact about -: generate the controller
    $ rails new myapp --database=postgresql
    $ render plain: 'hello'
    $ puts 'hello'

Calling the Gem for rest-client(API)

    $ gem install rest-client
    $ bundle update

    $ rails routes
    $ rails generate model book title:string author:string
    $ rails generate controller book

Debug

1. <%= debug(params) %>
2. <%= debug(@data) %>
3. rails c
4. Google Developer
5. buy bug
6. Pry Gem

Error :uninitialized constant LoginController Did you mean? LoginsController
Change delete 'logout', to: 'login#destroy' to delete 'logout', to: 'logins#destroy

rails new myApp --skip-active-record
https://codeburst.io/how-to-build-a-good-api-using-rubyonrails-ef7eadfa3078

JavaScript Cheat Sheet

deveshprojectwork — Mon, 27 Apr 2020 05:35:10 +0000

Variable Declaration
var x = 5;
var y = 10;
var length = 16;

var lastName = "Johnson";

var x = {
firstName: "Bean",
lastName: "Cam"
};

document.getElementById("demo").innerHTML = x + y;
document.getElementById('demo').innerHTML = 'Hello JavaScript';

WRITE AND ALERT
document.write('hello world');
window.alert('Hello World'); or alert('Hello World');

Calling function
myFunction(){
alert('Hello World')
}
<'button onclick="myFunction()">Click me.

function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
<'p id='demo'>

document.getElementById("demo").innerHTML = toCelsius(77);

Array
var cars = ["Saab", "Volvo", "BMW"];
var x = cars[1];
cars.sort()