{"id":181,"date":"2020-09-02T05:06:36","date_gmt":"2020-09-02T05:06:36","guid":{"rendered":"https:\/\/www.sagaratechnology.com\/blog\/?p=181"},"modified":"2023-03-29T17:21:20","modified_gmt":"2023-03-29T17:21:20","slug":"the-basic-of-front-end-development-process","status":"publish","type":"post","link":"https:\/\/sagaratechnology.com\/blog\/the-basic-of-front-end-development-process\/","title":{"rendered":"The Basic of Front End Development Process"},"content":{"rendered":"\n<figure class=\"wp-block-image\"><img\/><\/figure>\n\n\n\n<p id=\"e1bb\">If you are just entering the rewarding world of front-end development, you are in luck. You have made your choice to learn at this time. Like anything worth doing, front-end development is not easy, If you are up for the challenge, however, let us get you started!<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_76 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-69e49524c678f\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69e49524c678f\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/sagaratechnology.com\/blog\/the-basic-of-front-end-development-process\/#Work_Processes_of_Front-End_Development\" >Work Processes of Front-End Development<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/sagaratechnology.com\/blog\/the-basic-of-front-end-development-process\/#Logical_Layer\" >Logical Layer<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/sagaratechnology.com\/blog\/the-basic-of-front-end-development-process\/#Aesthetic_Layer\" >Aesthetic Layer<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/sagaratechnology.com\/blog\/the-basic-of-front-end-development-process\/#Factors_to_Consider_for_Front-End_Development\" >Factors to Consider for Front-End Development<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/sagaratechnology.com\/blog\/the-basic-of-front-end-development-process\/#Logical_Layer-2\" >Logical Layer<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/sagaratechnology.com\/blog\/the-basic-of-front-end-development-process\/#Aesthetic_Layer-2\" >Aesthetic Layer<\/a><\/li><\/ul><\/nav><\/div>\n<h2 id=\"4b7b\"><span class=\"ez-toc-section\" id=\"Work_Processes_of_Front-End_Development\"><\/span><strong>Work Processes of Front-End Development<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p id=\"503b\">In order to make websites and apps accessible to users, the front-end must complete three tasks:<\/p>\n\n\n\n<p id=\"97b5\">1) Get information the user requires from the back-end and translate it from the \u201cback-end language\u201d to the specific OS (operating system) language in which it will be shown to the user<\/p>\n\n\n\n<p id=\"1629\">2) Organize the information on the screen<\/p>\n\n\n\n<p id=\"e28d\">3) Give it an aesthetic shape<\/p>\n\n\n\n<p id=\"0f4b\">These tasks all occur within the front-end but in two different \u201c<strong>layers<\/strong>.\u201d In order to make these concepts more accessible, let\u2019s call them the&nbsp;<strong>Logical Layer<\/strong>&nbsp;and&nbsp;<strong>Aesthetic Layer<\/strong>.<\/p>\n\n\n\n<p>Read more:&nbsp;<a href=\"https:\/\/www.sagaratechnology.com\/blog\/the-fundamentals-of-front-end-and-back-end-development\/\" target=\"_blank\" rel=\"noreferrer noopener\">The Fundamentals of Front End and Back End Development<\/a><\/p>\n\n\n\n<h2 id=\"aca8\"><span class=\"ez-toc-section\" id=\"Logical_Layer\"><\/span><strong>Logical Layer<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p id=\"a03a\">We refer to it as \u201c<strong>logical<\/strong>\u201d because it is involve in gathering, interpreting, and processing the data that will later be shown within the aesthetic layer.<\/p>\n\n\n\n<p id=\"ca63\">For the first task to be accomplish, the front-end must communicate with the back-end through an API (Application Programming Interface) and ask it for specific information.<\/p>\n\n\n\n<p id=\"26fb\">In this step, developers must also specify through code the proper format in which the information should be delivere, since the front-end cannot perform anything in the back-end\u2019s foreign language. The most popular front-end languages including HTML, CSS, and JavaScript.<\/p>\n\n\n\n<p id=\"4a6f\">After the requested information has been properly delivered, the second task begins. During this step, developers must write additional code in order to specify the way the requested information will be shown to the user.<\/p>\n\n\n\n<h2 id=\"f2e7\"><span class=\"ez-toc-section\" id=\"Aesthetic_Layer\"><\/span><strong>Aesthetic Layer<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p id=\"ead8\">The aesthetic layer is exclusively related to the design of a website or app.<\/p>\n\n\n\n<p id=\"d3be\">As mentioned before, everything (including design) can be coded. However, nowadays there is a wide range of graphic design programs, such as Illustrator, Photoshop, and Sketch, that can expedite the development process.<\/p>\n\n\n\n<p id=\"7ffb\">The people responsible for all of the images and other elements users see on the screen are UI Designers or graphic designers who specialize in user interfaces.<\/p>\n\n\n\n<p id=\"4fb6\">To be clear, however, the images they create are static. They will only \u201ccome to life\u201d after the developers implement the necessary code to animate the graphic elements (a.k.a. assets) created by designers.<\/p>\n\n\n\n<h2 id=\"cfad\"><span class=\"ez-toc-section\" id=\"Factors_to_Consider_for_Front-End_Development\"><\/span><strong>Factors to Consider for Front-End Development<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h2 id=\"54f0\"><span class=\"ez-toc-section\" id=\"Logical_Layer-2\"><\/span><strong>Logical Layer<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p id=\"8b2f\">For the logical layer, it\u2019s important to take into account the language of the code you or your team are going to use. The code is essential for the front-end to work properly.<\/p>\n\n\n\n<p id=\"fd1a\">There are two main options:<\/p>\n\n\n\n<p id=\"5464\">1) Developing natively, which means to code in the specific language of a particular OS;<\/p>\n\n\n\n<p id=\"56d5\">2) Developing cross-platform, which means to write a non-specific code that will work across different OS\u2019s.<\/p>\n\n\n\n<p>Read more:&nbsp;<a href=\"https:\/\/www.sagaratechnology.com\/blog\/what-languages-are-used-for-front-end-development\/\" target=\"_blank\" rel=\"noreferrer noopener\">What Languages are Used for Front End Development?<\/a><\/p>\n\n\n\n<h2 id=\"2866\"><span class=\"ez-toc-section\" id=\"Aesthetic_Layer-2\"><\/span><strong>Aesthetic Layer<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p id=\"356b\">When it comes to the aesthetic layer, we share the following tips:<\/p>\n\n\n\n<p id=\"b4d8\">1) Bear in mind the specific navigability of each OS Design for iOS is not the same as design for Android since each OS has its own proportions, way of distributing elements, and ultimately its own navigability.<\/p>\n\n\n\n<p id=\"1d7a\">This reality is of extreme importance when it comes to front-end design. If you develop without taking this into account, your users will probably find the interface \u201cuncomfortable\u201d or \u201cweird,\u201d which would likely lead to the app\u2019s disuse or even deletion.<\/p>\n\n\n\n<p id=\"3952\">2) Ease the user\u2019s workflow through the conscious design of each screen, you can simplify the navigability and flow of your website or app, which is essential to its usability.<\/p>\n\n\n\n<p id=\"27f8\">Basic things, such as not forgetting the \u201cback\u201d button on each screen, can make the difference between an \u201ceasy-to-use\u201d app and an \u201cI-don\u2019t-get-it\u201d app.<\/p>\n\n\n\n<p id=\"b5ae\">3) Respect branding when designing a new website or app (or new webpage or feature. Be sure to keep the company\u2019s overall brand identity top of mind.<\/p>\n\n\n\n<p id=\"e663\">You should strive for originality. While also maintaining a consistent aesthetic line and respecting the OS\u2019s UI recommendations, such as Google\u2019s Material Design.<\/p>\n\n\n\n<p id=\"5124\">The most popular front-end languages including HTML, CSS, and JavaScript. If you want to become a developer, you need to learn code. Start building technical skills and identify what excites you about a tech career. Web development is just a popular entry point into a coding career and is different from mobile development. You can further specialize by developing Android applications or iOS applications. It all depends on your interests and what you want to do!<\/p>\n\n\n\n<p>Read also more Sagara&#8217;s Article here. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you are just entering the rewarding world of front-end development, you are in luck. You have made your choice to learn at this time. Like anything worth doing, front-end development is not easy, If you are up for the challenge, however, let us get you started! Work Processes of Front-End Development In order to&#8230;<\/p>\n","protected":false},"author":14,"featured_media":182,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[39,73,47,74,24],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>The Basic of Front End Development Process - Sagara Asia Blog<\/title>\n<meta name=\"description\" content=\"If you are just entering the rewarding world of front-end development, you are in luck. You have made your choice to learn at this time.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sagaratechnology.com\/blog\/the-basic-of-front-end-development-process\/\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"The Basic of Front End Development Process - Sagara Asia Blog\" \/>\n<meta name=\"twitter:description\" content=\"If you are just entering the rewarding world of front-end development, you are in luck. You have made your choice to learn at this time.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/sagaratechnology.com\/blog\/wp-content\/uploads\/2020\/09\/1_Hkc_4gPGQJQ3gajc0Kw9nQ.gif\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sagara Technology\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"The Basic of Front End Development Process - Sagara Asia Blog","description":"If you are just entering the rewarding world of front-end development, you are in luck. You have made your choice to learn at this time.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/sagaratechnology.com\/blog\/the-basic-of-front-end-development-process\/","twitter_card":"summary_large_image","twitter_title":"The Basic of Front End Development Process - Sagara Asia Blog","twitter_description":"If you are just entering the rewarding world of front-end development, you are in luck. You have made your choice to learn at this time.","twitter_image":"https:\/\/sagaratechnology.com\/blog\/wp-content\/uploads\/2020\/09\/1_Hkc_4gPGQJQ3gajc0Kw9nQ.gif","twitter_misc":{"Written by":"Sagara Technology","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sagaratechnology.com\/blog\/the-basic-of-front-end-development-process\/#article","isPartOf":{"@id":"https:\/\/sagaratechnology.com\/blog\/the-basic-of-front-end-development-process\/"},"author":{"name":"Sagara Technology","@id":"https:\/\/sagaratechnology.com\/blog\/#\/schema\/person\/e25a7dce1900980898a69a7c63241723"},"headline":"The Basic of Front End Development Process","datePublished":"2020-09-02T05:06:36+00:00","dateModified":"2023-03-29T17:21:20+00:00","mainEntityOfPage":{"@id":"https:\/\/sagaratechnology.com\/blog\/the-basic-of-front-end-development-process\/"},"wordCount":771,"commentCount":0,"publisher":{"@id":"https:\/\/sagaratechnology.com\/blog\/#organization"},"keywords":["API","Developing Natively","Front End Development","Mobile Development","web development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/sagaratechnology.com\/blog\/the-basic-of-front-end-development-process\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sagaratechnology.com\/blog\/the-basic-of-front-end-development-process\/","url":"https:\/\/sagaratechnology.com\/blog\/the-basic-of-front-end-development-process\/","name":"The Basic of Front End Development Process - Sagara Asia Blog","isPartOf":{"@id":"https:\/\/sagaratechnology.com\/blog\/#website"},"datePublished":"2020-09-02T05:06:36+00:00","dateModified":"2023-03-29T17:21:20+00:00","description":"If you are just entering the rewarding world of front-end development, you are in luck. You have made your choice to learn at this time.","breadcrumb":{"@id":"https:\/\/sagaratechnology.com\/blog\/the-basic-of-front-end-development-process\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sagaratechnology.com\/blog\/the-basic-of-front-end-development-process\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/sagaratechnology.com\/blog\/the-basic-of-front-end-development-process\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sagaratechnology.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Uncategorized","item":"https:\/\/sagaratechnology.com\/blog\/category\/uncategorized\/"},{"@type":"ListItem","position":3,"name":"The Basic of Front End Development Process"}]},{"@type":"WebSite","@id":"https:\/\/sagaratechnology.com\/blog\/#website","url":"https:\/\/sagaratechnology.com\/blog\/","name":"Sagara Asia Blog","description":"Dapatkan Informasi Seputar Teknologi dan Bisnis","publisher":{"@id":"https:\/\/sagaratechnology.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sagaratechnology.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/sagaratechnology.com\/blog\/#organization","name":"Sagara Technology","url":"https:\/\/sagaratechnology.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sagaratechnology.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/sagaratechnology.com\/blog\/wp-content\/uploads\/2021\/10\/sagara-logo.jpeg","contentUrl":"https:\/\/sagaratechnology.com\/blog\/wp-content\/uploads\/2021\/10\/sagara-logo.jpeg","width":200,"height":200,"caption":"Sagara Technology"},"image":{"@id":"https:\/\/sagaratechnology.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.linkedin.com\/company\/sagara-asia\/"]},{"@type":"Person","@id":"https:\/\/sagaratechnology.com\/blog\/#\/schema\/person\/e25a7dce1900980898a69a7c63241723","name":"Sagara Technology","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sagaratechnology.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/55085e31e9427bed3336eaea67c72b96?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/55085e31e9427bed3336eaea67c72b96?s=96&d=mm&r=g","caption":"Sagara Technology"},"sameAs":["https:\/\/sagaratechnology.com","https:\/\/www.facebook.com\/Sagaratechnology","https:\/\/www.linkedin.com\/company\/sagara-asia\/"]}]}},"_links":{"self":[{"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/posts\/181"}],"collection":[{"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/comments?post=181"}],"version-history":[{"count":6,"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/posts\/181\/revisions"}],"predecessor-version":[{"id":3949,"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/posts\/181\/revisions\/3949"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/media\/182"}],"wp:attachment":[{"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/media?parent=181"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/categories?post=181"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/tags?post=181"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}