{"id":1942,"date":"2021-06-22T09:47:45","date_gmt":"2021-06-22T09:47:45","guid":{"rendered":"https:\/\/blog.embold.io\/?p=1942"},"modified":"2021-06-24T05:53:38","modified_gmt":"2021-06-24T05:53:38","slug":"choosing-javascript-framework-libraries-for-web-development","status":"publish","type":"post","link":"https:\/\/blog.embold.io\/es\/choosing-javascript-framework-libraries-for-web-development\/","title":{"rendered":"Choosing JavaScript Framework &amp; Libraries for Web development"},"content":{"rendered":"\n<h1>Overview<\/h1>\n\n\n\n<p>In the last two decades, <strong>JavaScript (JS)<\/strong> has become one of the popular languages in programming. New features, style guides, libraries pop up almost every day and one should cope up with this new emerging development. <strong>JavaScript UI&nbsp;Frameworks&nbsp;and Libraries<\/strong> make it easier for developers to build clean and consistent User Interfaces (UI). The question here arises that how developers choose the libraries when they are beginners?&nbsp; It is very hard to figure out which ones to use especially when you\u2019re just started.<\/p>\n\n\n\n<h1>Simply understand now what are JavaScript frameworks and Libraries?<\/h1>\n\n\n\n<p><strong>JavaScript (JS) Libraries &#8211;<\/strong><\/p>\n\n\n\n<p>Generally, a <strong>JS library<\/strong> is a reusable piece of code that oftentimes has one primary use case. A library can consist of several functions\/objects\/methods, depending on the language. Your library can \u201clink\u201d to an application to allow you access to that functionality.<\/p>\n\n\n\n<p><strong>JavaScript (JS) Frameworks &#8211;<\/strong><\/p>\n\n\n\n<p>JS framework has\nmore control of your app. It helps direct you on the architecture and the\nproject that follows. Frameworks consist of multiple libraries, and they\nprovide you with hooks and callbacks, so you can continue to build upon them.<\/p>\n\n\n\n<p>JavaScript\nframeworks and libraries are both useful and it\u2019s a good idea to experiment and\nsee which ones work best for you.<\/p>\n\n\n\n<h1>Which are the frameworks and libraries that EMBOLD uses? <\/h1>\n\n\n\n<p><strong>Among different popular libraries,\nEmbold uses:<\/strong><\/p>\n\n\n\n<ul><li><strong>Utility JS Libraries<\/strong><ul><li><strong>Underscore<\/strong>&#8211; Underscore is a utility library that consists of over 100 functions. These functions help to manipulate arrays, objects, and other functions.<br> <em>Underscore is an excellent library used by Embold especially helpful for delivering functionality!<\/em><\/li><\/ul><ul><li><strong>jQuery<\/strong>&#8211; Unlike other libraries, jQuery is a feature-rich library that helps us to build interactive web pages. <\/li><\/ul><\/li><\/ul>\n\n\n\n<ul><li><strong>Library for Graphing and Visualizations<\/strong><ul><li><strong><em>D3.js<\/em><\/strong>&#8211; Embold is data-driven, representing various statistics. The Data-Driven Documents, or D3.js, library is unique in that it puts the data first. <\/li><li>The main advantage of using this library is that it is extremely flexible for handling the content using SVG, HTML, and CSS. <\/li><\/ul><\/li><\/ul>\n\n\n\n<p>Let&#8217;s see here an example of a <strong>Bubble chart<\/strong> visual representation used for partitioning in Embold. The partitioning editor breaks bigger components into smaller ones defining in-depth granularity. <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1366\" height=\"620\" src=\"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/Partitioning_blogimg.png\" alt=\"\" class=\"wp-image-1968\" srcset=\"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/Partitioning_blogimg.png 1366w, https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/Partitioning_blogimg-768x349.png 768w, https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/Partitioning_blogimg-1170x531.png 1170w, https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/Partitioning_blogimg-585x266.png 585w\" sizes=\"(max-width: 1366px) 100vw, 1366px\" \/><\/figure>\n\n\n\n<ul><li><strong>echarts- <\/strong>Another Javascript library used by Embold provides data visualization, interactive and customizable charts. It provides flexibility and gives very satisfying results.<\/li><\/ul>\n\n\n\n<p>Embold uses this heatmap to understand the overall quality of your software and identify different components. Read <a rel=\"noreferrer noopener\" href=\"https:\/\/docs.embold.io\/v2-quick-start-guide\/#view-and-interpret-heatmap-v2\" target=\"_blank\">here <\/a>for more details. <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1482\" height=\"823\" src=\"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/echarts_blog_img1.png\" alt=\"\" class=\"wp-image-1960\" srcset=\"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/echarts_blog_img1.png 1482w, https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/echarts_blog_img1-768x426.png 768w, https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/echarts_blog_img1-1170x650.png 1170w, https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/echarts_blog_img1-585x325.png 585w\" sizes=\"(max-width: 1482px) 100vw, 1482px\" \/><\/figure>\n\n\n\n<p>Embold uses these <strong>bubble charts <\/strong>to showcase the module dependency. This helps to visualize the dependencies between various components or packages. Get an insight into module dependency <a href=\"https:\/\/docs.embold.io\/dependencies\/#module-dependency\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">here<\/a>. <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1418\" height=\"805\" src=\"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/echarts_blog_img2.png\" alt=\"\" class=\"wp-image-1961\" srcset=\"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/echarts_blog_img2.png 1418w, https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/echarts_blog_img2-768x436.png 768w, https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/echarts_blog_img2-1170x663.png 1170w, https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/echarts_blog_img2-585x332.png 585w\" sizes=\"(max-width: 1418px) 100vw, 1418px\" \/><\/figure>\n\n\n\n<p>Embold uses a <strong>pie chart<\/strong> to get the statistics of various languages. <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"463\" height=\"184\" src=\"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/echarts_blog_img3.png\" alt=\"\" class=\"wp-image-1962\" \/><\/figure>\n\n\n\n<ul><li><strong>Monaco<\/strong>&#8211;  The <strong>Monaco Editor<\/strong> is the code <strong>editor<\/strong> that powers VS Code. It is licensed under the MIT License and supports IE 9\/10\/11, Edge, Chrome, Firefox, Safari, and Opera. Monaco Editor is a tool in the Text Editor category of a tech stack. Monaco Editor is an open-source tool. <br>Monaco provides: <ul><li>Out of the Box Intellisense <\/li><li>Accessibility<\/li><li>Power vscode, with all its features <\/li><li>Good support for none-monospace fonts <\/li><\/ul><\/li><\/ul>\n\n\n\n<p>Embold uses this Monaco editor to show the files. Below is an\nexample: <\/p>\n\n\n\n<ul class=\"is-layout-flex wp-block-gallery-1 wp-block-gallery columns-1 is-cropped\"><li class=\"blocks-gallery-item\"><figure><img decoding=\"async\" loading=\"lazy\" width=\"1920\" height=\"1080\" src=\"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/Monaco_blog_img.png\" alt=\"\" data-id=\"1959\" data-link=\"https:\/\/blog.embold.io\/?attachment_id=1959\" class=\"wp-image-1959\" srcset=\"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/Monaco_blog_img.png 1920w, https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/Monaco_blog_img-768x432.png 768w, https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/Monaco_blog_img-1170x658.png 1170w, https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/Monaco_blog_img-585x329.png 585w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><\/figure><\/li><\/ul>\n\n\n\n<p>Embold uses Monaco editor for the Pull Request feature to show the difference between a previous and an existing file. Get more info about pull requests from our doc\u2019s portal <a href=\"https:\/\/docs.embold.io\/development-history\/#pull-request-workflow\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">here<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1362\" height=\"619\" src=\"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/PR_blogimg.png\" alt=\"\" class=\"wp-image-1965\" srcset=\"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/PR_blogimg.png 1362w, https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/PR_blogimg-768x349.png 768w, https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/PR_blogimg-1170x532.png 1170w, https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/PR_blogimg-585x266.png 585w\" sizes=\"(max-width: 1362px) 100vw, 1362px\" \/><\/figure>\n\n\n\n<p><strong>Frameworks used by Embold are:<\/strong><\/p>\n\n\n\n<ul><li><strong>Bootstrap- <\/strong>This framework can be used by anybody who has basic knowledge of HTML and CSS. Embold integrates this framework because of its responsiveness, customized design layouts, the styling of elements required as per our needs.<br> <img decoding=\"async\" loading=\"lazy\" width=\"3000\" height=\"2000\" class=\"wp-image-1966\" style=\"width: 1000px\" src=\"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/Bootstrap_blogimg.jpg\" alt=\"\" srcset=\"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/Bootstrap_blogimg.jpg 3000w, https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/Bootstrap_blogimg-768x512.jpg 768w, https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/Bootstrap_blogimg-1170x780.jpg 1170w, https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/Bootstrap_blogimg-1920x1280.jpg 1920w, https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/Bootstrap_blogimg-585x390.jpg 585w, https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/Bootstrap_blogimg-263x175.jpg 263w\" sizes=\"(max-width: 3000px) 100vw, 3000px\" \/><\/li><\/ul>\n\n\n\n<ul><li><strong>Angular<\/strong>&#8211; Angular is the typescript-based open-source web application framework used by Embold. This framework encourages developers to create custom libraries in JS by reducing <a href=\"https:\/\/docs.embold.io\/metrics\/#lines-of-code\">Lines Of Code (LOC)<\/a> and implementing complex functionalities easily. <br><img decoding=\"async\" loading=\"lazy\" width=\"577\" height=\"331\" class=\"wp-image-1967\" style=\"width: 1000px\" src=\"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/angular_img.jpg\" alt=\"\"><\/li><\/ul>\n\n\n\n<ul><li><strong>Node.js- <\/strong>It is an open-source platform that creates a runtime environment for developers basically to work on server-side and networking applications. This is highly scalable and portable. <br><img decoding=\"async\" loading=\"lazy\" width=\"688\" height=\"336\" class=\"wp-image-1945\" style=\"width: 1000px\" src=\"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/node.js_.png\" alt=\"\" srcset=\"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/node.js_.png 688w, https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/node.js_-585x286.png 585w\" sizes=\"(max-width: 688px) 100vw, 688px\" \/><\/li><\/ul>\n\n\n\n<p>Node.js allows JS to run on the\nEmbold backend server.<\/p>\n\n\n\n<h3>Why use Node.js?<\/h3>\n\n\n\n<p>Node.js is used for a wide variety\nof applications in Embold:<\/p>\n\n\n\n<ol><li>Live chats <\/li><li>Data streaming<\/li><li>Rest APIs <\/li><\/ol>\n\n\n\n<h1>Conclusion<\/h1>\n\n\n\n<p>Over other all languages, JavaScript still looks dominant language in this era and will continue to be the future of programming languages. Whether you\u2019re a frontend or a backend developer, choosing a perfect library and framework for your project is essential. <\/p>\n\n\n\n<p style=\"text-align:left\">Here, we at <a rel=\"noreferrer noopener\" aria-label=\"Embold  (opens in a new tab)\" href=\"http:\/\/www.embold.io\" target=\"_blank\">Embold <\/a>write clean code releasing constantly new features. Thanks to JavaScript libraries and Frameworks! <\/p>\n\n\n\n<p>So, what are some of your favorite JavaScript libraries and Framework? Don\u2019t forget to comment below. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Overview In the last two decades, JavaScript (JS) has become one of the popular languages in programming. New features, style guides, libraries pop up almost every day and one should&hellip;<\/p>\n","protected":false},"author":10,"featured_media":1953,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[126,125,31,127,124],"better_featured_image":{"id":1953,"alt_text":"","caption":"","description":"","media_type":"image","media_details":{"width":3000,"height":2000,"file":"2021\/06\/JavaScript_blog_img.jpg","sizes":{"thumbnail":{"file":"JavaScript_blog_img-150x150.jpg","width":150,"height":150,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/JavaScript_blog_img-150x150.jpg"},"medium_large":{"file":"JavaScript_blog_img-768x512.jpg","width":768,"height":512,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/JavaScript_blog_img-768x512.jpg"},"penci-full-thumb":{"file":"JavaScript_blog_img-1170x780.jpg","width":1170,"height":780,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/JavaScript_blog_img-1170x780.jpg"},"penci-slider-thumb":{"file":"JavaScript_blog_img-1170x663.jpg","width":1170,"height":663,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/JavaScript_blog_img-1170x663.jpg"},"penci-magazine-slider":{"file":"JavaScript_blog_img-780x516.jpg","width":780,"height":516,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/JavaScript_blog_img-780x516.jpg"},"penci-slider-full-thumb":{"file":"JavaScript_blog_img-1920x800.jpg","width":1920,"height":800,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/JavaScript_blog_img-1920x800.jpg"},"penci-single-full":{"file":"JavaScript_blog_img-1920x1280.jpg","width":1920,"height":1280,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/JavaScript_blog_img-1920x1280.jpg"},"penci-thumb":{"file":"JavaScript_blog_img-585x390.jpg","width":585,"height":390,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/JavaScript_blog_img-585x390.jpg"},"penci-masonry-thumb":{"file":"JavaScript_blog_img-585x390.jpg","width":585,"height":390,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/JavaScript_blog_img-585x390.jpg"},"penci-thumb-square":{"file":"JavaScript_blog_img-585x585.jpg","width":585,"height":585,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/JavaScript_blog_img-585x585.jpg"},"penci-thumb-vertical":{"file":"JavaScript_blog_img-480x650.jpg","width":480,"height":650,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/JavaScript_blog_img-480x650.jpg"},"penci-thumb-small":{"file":"JavaScript_blog_img-263x175.jpg","width":263,"height":175,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/JavaScript_blog_img-263x175.jpg"},"jr_insta_square":{"file":"JavaScript_blog_img-640x640.jpg","width":640,"height":640,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/JavaScript_blog_img-640x640.jpg"}},"image_meta":{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0","keywords":[]}},"post":1942,"source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/06\/JavaScript_blog_img.jpg"},"translation":{"provider":"WPGlobus","version":"2.10.8","language":"es","enabled_languages":["en","es","de","fr","ru"],"languages":{"en":{"title":true,"content":true,"excerpt":false},"es":{"title":false,"content":false,"excerpt":false},"de":{"title":false,"content":false,"excerpt":false},"fr":{"title":false,"content":false,"excerpt":false},"ru":{"title":false,"content":false,"excerpt":false}}},"_links":{"self":[{"href":"https:\/\/blog.embold.io\/es\/wp-json\/wp\/v2\/posts\/1942"}],"collection":[{"href":"https:\/\/blog.embold.io\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.embold.io\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.embold.io\/es\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.embold.io\/es\/wp-json\/wp\/v2\/comments?post=1942"}],"version-history":[{"count":11,"href":"https:\/\/blog.embold.io\/es\/wp-json\/wp\/v2\/posts\/1942\/revisions"}],"predecessor-version":[{"id":1971,"href":"https:\/\/blog.embold.io\/es\/wp-json\/wp\/v2\/posts\/1942\/revisions\/1971"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.embold.io\/es\/wp-json\/wp\/v2\/media\/1953"}],"wp:attachment":[{"href":"https:\/\/blog.embold.io\/es\/wp-json\/wp\/v2\/media?parent=1942"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.embold.io\/es\/wp-json\/wp\/v2\/categories?post=1942"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.embold.io\/es\/wp-json\/wp\/v2\/tags?post=1942"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}