<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: amirmahdimaleki</title>
    <description>The latest articles on DEV Community by amirmahdimaleki (@amirmahdimaleki).</description>
    <link>https://dev.to/amirmahdimaleki</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F814583%2F99084a35-ef74-450a-9061-4c01a7817ba9.jpg</url>
      <title>DEV Community: amirmahdimaleki</title>
      <link>https://dev.to/amirmahdimaleki</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/amirmahdimaleki"/>
    <language>en</language>
    <item>
      <title>JS Frameworks Guide</title>
      <dc:creator>amirmahdimaleki</dc:creator>
      <pubDate>Thu, 22 Aug 2024 18:17:09 +0000</pubDate>
      <link>https://dev.to/amirmahdimaleki/js-frameworks-guide-fo</link>
      <guid>https://dev.to/amirmahdimaleki/js-frameworks-guide-fo</guid>
      <description>&lt;h2&gt;
  
  
  How to choose a JS framework for beginners
&lt;/h2&gt;

&lt;p&gt;A lot of software developers are now using &lt;strong&gt;JS&lt;/strong&gt; as their main programming language to build powerful websites🌐, applications💻 and even games🎮! &lt;/p&gt;

&lt;p&gt;By learning this language you can work as a front-end developer, back-end developer, QA engineer, mobile app developer, and lots of other roles.&lt;br&gt;
  But if you're a beginner, you will get lost in the ocean of JS frameworks and libraries🤔. In this article we're going to know which one to start with (particularly Backend and Frontend), and why?&lt;/p&gt;
&lt;h2&gt;
  
  
  Front-End Frameworks
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F540nbnyz8mu98g9mbslc.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F540nbnyz8mu98g9mbslc.png" alt="Image description" width="800" height="343"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;There are elegant JS front-end frameworks like : &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://legacy.reactjs.org/" rel="noopener noreferrer"&gt;React&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://angular.dev/" rel="noopener noreferrer"&gt;Angular&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://vuejs.org/" rel="noopener noreferrer"&gt;Vue&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://nextjs.org/" rel="noopener noreferrer"&gt;NextJS&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://nuxt.com/" rel="noopener noreferrer"&gt;NuxtJS&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://svelte.dev/" rel="noopener noreferrer"&gt;Svelte&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;
  
  
  Back-End Frameworks
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkk8mwcys9l48v5qden8e.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkk8mwcys9l48v5qden8e.png" alt="Image description" width="748" height="461"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;There are also powerful (Node)JS back-end frameworks for example: &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://expressjs.com/" rel="noopener noreferrer"&gt;expressjs&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://nestjs.com" rel="noopener noreferrer"&gt;nestjs&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://adonisjs.com/" rel="noopener noreferrer"&gt;adonisjs&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://fastapi.tiangolo.com/" rel="noopener noreferrer"&gt;fastapi&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://hapi.dev/" rel="noopener noreferrer"&gt;hapi&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.meteor.com/" rel="noopener noreferrer"&gt;meteor&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;
  
  
  How to choose one framework?
&lt;/h2&gt;

&lt;p&gt;You need to know which field do you like the most? front-end, back-end or fullstack?&lt;/p&gt;

&lt;p&gt;Next you should consider some points about those technologies :&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;popularity&lt;/li&gt;
&lt;li&gt;demand and salary&lt;/li&gt;
&lt;li&gt;documentation and resources&lt;/li&gt;
&lt;li&gt;and so on ...&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Considering above points, &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;If you want to be a front-end developer you should start with react, based on &lt;a href="https://survey.stackoverflow.co/2024/technology/" rel="noopener noreferrer"&gt;stackoverflow 2024 survey&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F44eha7yj6kul1pnyzfpn.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F44eha7yj6kul1pnyzfpn.png" alt="Image description" width="757" height="449"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;and you can keep lerning by diving into NextJS and so on.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;If you want to be a back-end developer you should start with ExpressJS, again based on &lt;a href="https://survey.stackoverflow.co/2024/technology/" rel="noopener noreferrer"&gt;stackoverflow 2024 survey&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;and keep learning with NestJS and so on.&lt;/p&gt;

&lt;p&gt;If you Ask me ExpressJS is so easy to use and very powerful.&lt;br&gt;
just look at this basic routing in Express :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;send&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello World!&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;

&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;post&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;send&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Got a POST request&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;

&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;put&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/user&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;send&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Got a PUT request at /user&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;

&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="k"&gt;delete&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/user&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;send&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Got a DELETE request at /user&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



</description>
      <category>javascript</category>
      <category>react</category>
      <category>webdev</category>
      <category>express</category>
    </item>
  </channel>
</rss>
