<h3>lets understand Wast is frontend</h3>
<ul>
<li>Normally We work with UI and this is frontend development</li>
<li>Client/browser is needed for frontend</li>
<li>frontend ui can be built on different technologies like angular, vue or react/next.js</li>
<li>No matter what we use for building ui ultimately converted to HTML, CSS AND JS since browser only understand these</li>
</ul>
<h3>Lets understand What is backend</h3>
<ul>
<li>when the work is building logic, playing with data, calculation or computational related works.</li>
<li>Server is required for backend development</li>
<li>In backend we can use different languages like php, rails python,java,js.</li>
<li>We are not running the backend in browser, we can think like that backend itself is a computer and can run any language.</li>
<li>Now a days we can use <code>node.js</code> as backend, Its javascript runtime now.</li>
<li>js was made for frontend or browser related works. This was not made to write backend code. This lacking was filled by node.js run time. now we can wite backend code using js as well.</li>
<li>Node.js is not a programming language. Js is a programming language and node.js(js run time) made a way for js to write code for backend.</li>
<li>Other language like php, rails python,java these are self sufficient so that they do not need any others help to be able to be used for writing backend code.</li>
<li>when the work is building logic, playing with data, calculation or computational related works.</li>
<li>Server is required for backend development</li>
<li>In backend we can use different languages like php, rails python,java,js.</li>
<li>We are not running the backend in browser, we can think like that backend itself is a computer and can run any language.</li>
<li>Now a days we can use <code>node.js</code> as backend, Its javascript runtime now.</li>
<li>js was made for frontend or browser related works. This was not made to write backend code. This lacking was filled by node.js run time. now we can wite backend code using js as well.</li>
<li>Node.js is not a programming language. Js is a programming language and node.js(js run time) made a way for js to write code for backend.</li>
<li>Other language like php, rails python,java these are self sufficient so that they do not need any others help to be able to be used for writing backend code.</li>
<li>Data are kept in backend as files. after a request to server server takes the files from backend and deliver to frontend.</li>
<li>Other option is server can communicate with our database and serves processed data from database after a successful request. this is why backend is called an application.</li>
</ul>
<h3>Two Types Of Website we Can See In Practical Life</h3>
<h4>Static Website</h4>
<ul>
<li>In Previous day we used to store html, css js files like image videos were stored in backend <code>server</code>.</li>
<li>Inside the backend server we were used to create a page and the copy of the page was used be sent to frontend.</li>
<li>Frontend used to show the copy of the page created in backend like pre made food.</li>
</ul>
<h4>Dynamic Website (Server Side Rendering)</h4>
<p><img src="https://media.daily.dev/image/upload/s--hpTXOFOd--/f_auto/v1748850389/ugc/content_6b593056-0394-4d10-9ccc-b9611d4d7db1?_a=BAMClqUq0" alt="image"></p>
<ul>
<li>
<p>Here pages are not pre made in server.</p>
</li>
<li>
<p>In case of Dynamic Website when a request comes from client side, All the required data comes from <code>Database</code>.</p>
</li>
<li>
<p>Required data comes to server from database.</p>
</li>
<li>
<p>Then the server uses some templates like <code>HBS</code>, <code>PUG</code>, <code>EJS</code> (These are Template engine for making page) to build the page using the data came from database and then the page is sent to browser using server and shown to frontend. <strong>This is Called Server side Rendering(SSR)</strong></p>
</li>
</ul>
<h4>Now Lets See Client side Rendering(CSR) in dynamic Website</h4>
<p><img src="https://media.daily.dev/image/upload/s--lZG46GP8--/f_auto/v1748850547/ugc/content_21b15b38-baca-423b-882c-5bd8ea25ed04?_a=BAMClqUq0" alt="image"></p>
<ul>
<li>Another method is we can see the data in frontend using api.</li>
<li>when request comes from client side then server will request the data from database and gets the data</li>
<li>Then server modifies the data according to our requirement and send to browser</li>
<li>Remember that here browser is just getting the raw data i mean no html css and js and others like images, browser is just getting the json data.</li>
<li>Now the Browser is building the site using the data and the html css coming from frontend technology.</li>
<li>The page can be build using any kind of frontend library like react, vue, angular etc.</li>
</ul>
<h4>What are the benefits of Using API?</h4>
<ul>
<li>When json data is coming from backend to frontend then it will support <code>CROSS</code> Device or platform.</li>
<li>Can be seen in mobile browser UI, Desktop Browser UI, Desktop application or Mobile application.</li>
<li>On the other hand the static website is like we have to make it for each and every device and platform. this is a hassle. So, east or west dynamic is the best.</li>
<li>Moreover API built site is also better than the server side rendering since if we use template engine to make page they should be made different for each app and each platform as well and this is time consuming our time to build a site.</li>
<li>The best solution is use api and build in browser side using frontend library so that each and every device can access.</li>
</ul>



Code Together: Dive into JavaScript Mastery — Join the squad where curiosity meets expertise!

JavaScript Developer

Frontend development focuses on user interfaces that run in browsers, using technologies like React, Vue, or Angular that ultimately compile to HTML, CSS, and JavaScript. Backend development handles server-side logic, data processing, and calculations using languages like PHP, Python, Java, or JavaScript with Node.js. Static websites serve pre-built pages, while dynamic websites use either server-side rendering (SSR) with template engines or client-side rendering (CSR) with APIs. API-based approaches offer better cross-platform compatibility, allowing the same data to be consumed by web browsers, mobile apps, and desktop applications.

Frontend vs Backend Development