{"id":6368,"date":"2016-03-23T06:00:26","date_gmt":"2016-03-23T13:00:26","guid":{"rendered":"http:\/\/editor.thinkapps.com\/blog\/?p=6368"},"modified":"2016-04-15T16:47:27","modified_gmt":"2016-04-15T23:47:27","slug":"basics-front-end-development","status":"publish","type":"post","link":"https:\/\/thinkapps.com\/blog\/development\/basics-front-end-development\/","title":{"rendered":"Basics of Front-End Development"},"content":{"rendered":"

What is front-end development and how does it compare to back-end<\/a><\/span>? What techniques do front-end developers use? Read this guest post from our friends at\u00a0Tictapps<\/span><\/a><\/span> to\u00a0find out!<\/em><\/p>\n

Ever wonder what goes into making websites and mobile apps\u00a0work? Maybe you’ve\u00a0heard about front-end development and UI design<\/a>\u00a0but don’t really understand\u00a0how they relate to each other?<\/p>\n

If these questions resonate, then this guide to the basics of front-end development\u00a0was created just for you. \ud83d\ude42<\/p>\n

Front-End vs Back-End<\/h2>\n

The front-end of an app or website is<\/strong> <\/span>everything the final user can see and interact with<\/b>, including text, images, animations, transitions, and any other\u00a0element that can\u00a0be shown through digital devices. <\/span><\/p>\n

The front-end has a\u00a0dual mission of 1)\u00a0organizing information requested by the user and 2) showing it to him or her\u00a0in a language (s)he\u00a0can easily understand.<\/p>\n

Thus, the front-end must be able to transform or “translate” such information from the pure code in which it arrives\u00a0from\u00a0the back-end (see our previous post on the\u00a0<\/span>Basics of Back-End Development<\/a><\/span>) to the humanly-recognizable elements mentioned above. <\/span><\/p>\n

Work Processes of Front-End Development<\/h2>\n

In order to make websites and apps accessible to users, the front-end must\u00a0complete three tasks:<\/span><\/p>\n

1) Get information\u00a0the user requires from the back-end and translate it from the “back-end language” to the specific OS (operating system) language<\/a>\u00a0in which it will\u00a0be shown to the user;<\/p>\n

2) Organize the information\u00a0on the screen; and<\/p>\n

3) Give it an aesthetic shape.<\/p>\n

These tasks all\u00a0occur within the front-end but in two different “layers.” In order to make these concepts more accessible, let’s\u00a0call\u00a0them the Logical Layer and Aesthetic Layer.<\/span><\/p>\n

Logical Layer<\/h3>\n

The logical layer of the front-end is where tasks #1 and #2 take place. We refer to it as\u00a0“logical” because\u00a0it is involved in gathering, interpreting, and processing the data that will later\u00a0be shown within the aesthetic layer.<\/span><\/p>\n

For the first task\u00a0to be accomplished, the front-end must\u00a0communicate with the back-end through an\u00a0API (Application Programming Interface)<\/a>\u00a0and ask it for specific information. <\/span><\/p>\n

In this step,\u00a0developers must\u00a0also specify through code the proper format in which the information should\u00a0be delivered, since the front-end cannot perform anything in the back-end’s foreign language. The most popular front-end languages include\u00a0HTML, CSS, and\u00a0JavaScript. <\/span><\/p>\n

After the requested information has been properly delivered, the second task begins. During this step,\u00a0developers must write additional code in order to specify the way the requested information will be shown to the user.<\/span><\/p>\n

Example 1<\/strong><\/h4>\n

Here is an example from our\u00a0Android development team at <\/span>Tictapps<\/span><\/a>, a mobile consultancy and development agency based in Argentina:<\/span><\/p>\n

\"Basics<\/a><\/p>\n

This fragment of code, which belongs to the app of Aeropuertos Argentina 2000<\/a>, may at first glance look like a hieroglyph. However, after a second look, hopefully you can see\u00a0that this is a pretty logical language through\u00a0which even non-technical founders<\/a> and product managers can understand how front-end development\u00a0works.<\/span><\/p>\n

At lines 1, 2, and 6, different work orders have been coded for bringing information from the back-end into the specific OS language in which it is needed. In this case, it’s the Android language.<\/span><\/p>\n

Let’s break it down: On line 1, the parameter “getArrivalOrDeparture” orders the back-end to bring “Arrivals” or “Departures” data, and at line 2, information\u00a0about “Airlines” is requested\u00a0through the “getAerolinea” code. <\/span><\/p>\n

You\u00a0can see that while lines 1 and 2 are doing the “get info” work, line 6 is performing the “translation” through the “JSONrray” parameter, which specifies that the information needs to be translated from the back-end’s language of JSON\u00a0to the\u00a0Android language used by\u00a0the front-end. <\/span><\/p>\n

Now that you’ve become\u00a0familiar with the “getting” and “translating” information processes of the logical layer, let’s turn to\u00a0the “ordering” task. This one is\u00a0also logical, and its goal is to specify the disposition of the information on the screen. <\/span><\/p>\n

To help make this step more clear, let’s\u00a0look at another example.<\/span><\/p>\n

Example 2<\/strong><\/h4>\n

\"Basics<\/a><\/p>\n

The image above contains a fragment of code that\u00a0indicates the distribution of some data in Aeropuertos Argentina’s app. In this case, it specifies\u00a0every element\u00a0of\u00a0a basic button for getting flight info. <\/span><\/p>\n

“Width,” “Height,” “Center,” and “Background” parameters indicate the exact format and position of the button on\u00a0the app screen. This demonstrates how\u00a0the “ordering” process of the front-end’s logical layer gives orders about info distribution as well as\u00a0design. <\/span><\/p>\n

Through code, front-end developers are able to design absolutely everything that\u00a0users see on the websites and mobile apps they use. But\u00a0coding is hard, and there are other processes that can help developers make the front-end construction more agile. <\/span><\/p>\n

Here we are talking about design for the front-end, also known as UI Design, which takes place in the aesthetic layer mentioned earlier. \u00a0<\/span><\/p>\n

Aesthetic Layer<\/h3>\n

The aesthetic layer is exclusively related to the design of a website or app. <\/span><\/p>\n

As mentioned\u00a0before, everything (including design)\u00a0can be coded. However, nowadays there are\u00a0a wide range of graphic design programs, such as Illustrator, Photoshop, and Sketch, that\u00a0can expedite the development process. <\/span><\/p>\n

The people responsible for\u00a0all of the images and other elements users\u00a0see on the screen are UI Designers or graphic designers who specialize in user interfaces. <\/span><\/p>\n

To be clear, however, the images they create are static. They will only “come to life” after the developers implement the necessary code to animate the graphic elements\u00a0(a.k.a.\u00a0<\/span>assets<\/span>) created by\u00a0designers. \u00a0<\/span><\/p>\n

Factors to Consider for Front-End Development<\/h2>\n

Logical Layer<\/h3>\n

For\u00a0the logical layer, it’s important to\u00a0take into account the language of the code you or your team are\u00a0going to use. As noted\u00a0throughout this article, the code is essential for the front-end to work properly. <\/span><\/p>\n

There are two main options:<\/p>\n

1) Developing natively, which means to code in the specific language of a\u00a0particular\u00a0OS; or<\/p>\n

2) Developing cross-platform, which means to write\u00a0non-specific code that will work\u00a0across different OS’s.<\/p>\n

(For more on these topics, check out ThinkApps’\u00a0articles about the pros and cons of iOS vs. Android development<\/a> and the top cross-platform development tools<\/a>.)<\/em><\/p>\n

At this time, our recommendation here at <\/span>Tictapps <\/span>is to use native languages\u00a0because\u00a0the role of the code is fundamental, and you decrease its likelihood of breaking by choosing this approach. (See our previous guest post on\u00a0<\/span>Responsive Web vs Native Apps<\/a>\u00a0to learn more<\/span>).<\/span><\/p>\n

Aesthetic Layer<\/h3>\n

When it comes to\u00a0the aesthetic layer, Leandro Gebel<\/a>\u00a0of\u00a0the Tictapps’ UI design team\u00a0shares\u00a0the following tips:<\/p>\n

1) Bear in mind\u00a0the specific navigability of each OS<\/p>\n

Design for iOS is not the same as design for Android<\/a>, since each OS has its own proportions, way of distributing elements, and ultimately its own navigability. <\/span><\/p>\n

This reality is of extreme importance when it comes to front-end design. If you\u00a0develop without taking this into account, your users will probably find the\u00a0interface “uncomfortable” or “weird,” which would likely lead to the\u00a0app’s disuse or\u00a0even deletion. <\/span><\/p>\n

2) Ease the user’s workflow<\/p>\n

Through the conscious design of each screen, you can\u00a0simplify the navigability and flow of your website\u00a0or app, which is essential to its\u00a0usability.<\/p>\n

Basic things, such as not forgetting the “back” button on each screen, can make the difference between an “easy-to-use” app and an “I-don’t-get-it” app.<\/p>\n

3) Respect branding<\/p>\n

When designing a new website or app (or new webpage or feature), be sure to keep\u00a0the company’s overall brand identity top of mind.<\/p>\n

You should strive for originality while also maintaining a consistent aesthetic line and respecting the OS’s UI recommendations,\u00a0such as Google’s Material Design<\/a>.<\/p>\n

This article\u00a0is part of ThinkApps’ ongoing\u00a0series on app development. Please check out our previous posts on related topics<\/a> to learn more.<\/em><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"

What is front-end development and how does it compare to back-end? What techniques do front-end developers use? Read this guest post from our friends at Tictapps to find out!<\/p>\n","protected":false},"author":64,"featured_media":6230,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[5],"tags":[30,488,491,487,364,492],"acf":[],"yoast_head":"\nBasics of Front-End Development<\/title>\n<meta name=\"description\" content=\"What is front-end development and how does it compare to\u00a0back-end? What techniques do front-end developers use? Read this post to find out!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/thinkapps.com\/blog\/development\/basics-front-end-development\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Basics of Front-End Development\" \/>\n<meta property=\"og:description\" content=\"What is front-end development and how does it compare to\u00a0back-end? What techniques do front-end developers use? Read this post to find out!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thinkapps.com\/blog\/development\/basics-front-end-development\/\" \/>\n<meta property=\"og:site_name\" content=\"Build Blog by ThinkApps | Content on Entrepreneurship, Mobile Apps, Web Platforms and more\" \/>\n<meta property=\"article:published_time\" content=\"2016-03-23T13:00:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-04-15T23:47:27+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/d1vqbpto5tbbz0.cloudfront.net\/blog\/wp-content\/uploads\/2016\/01\/11135016\/Frontend.png\" \/>\n\t<meta property=\"og:image:width\" content=\"597\" \/>\n\t<meta property=\"og:image:height\" content=\"297\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Maria Murillo\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Maria Murillo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/thinkapps.com\/blog\/development\/basics-front-end-development\/\",\"url\":\"https:\/\/thinkapps.com\/blog\/development\/basics-front-end-development\/\",\"name\":\"Basics of Front-End Development\",\"isPartOf\":{\"@id\":\"http:\/\/localhost:8080\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/thinkapps.com\/blog\/development\/basics-front-end-development\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/thinkapps.com\/blog\/development\/basics-front-end-development\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/d1vqbpto5tbbz0.cloudfront.net\/blog\/wp-content\/uploads\/2016\/01\/11135016\/Frontend.png\",\"datePublished\":\"2016-03-23T13:00:26+00:00\",\"dateModified\":\"2016-04-15T23:47:27+00:00\",\"author\":{\"@id\":\"http:\/\/localhost:8080\/blog\/#\/schema\/person\/ce79759f6b091cdc302a422de3631ace\"},\"description\":\"What is front-end development and how does it compare to\u00a0back-end? What techniques do front-end developers use? Read this post to find out!\",\"breadcrumb\":{\"@id\":\"https:\/\/thinkapps.com\/blog\/development\/basics-front-end-development\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/thinkapps.com\/blog\/development\/basics-front-end-development\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/thinkapps.com\/blog\/development\/basics-front-end-development\/#primaryimage\",\"url\":\"https:\/\/d1vqbpto5tbbz0.cloudfront.net\/blog\/wp-content\/uploads\/2016\/01\/11135016\/Frontend.png\",\"contentUrl\":\"https:\/\/d1vqbpto5tbbz0.cloudfront.net\/blog\/wp-content\/uploads\/2016\/01\/11135016\/Frontend.png\",\"width\":597,\"height\":297,\"caption\":\"Basics of Front-End Development - The Front-End\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/thinkapps.com\/blog\/development\/basics-front-end-development\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/localhost:8080\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Basics of Front-End Development\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/localhost:8080\/blog\/#website\",\"url\":\"http:\/\/localhost:8080\/blog\/\",\"name\":\"Build Blog by ThinkApps | Content on Entrepreneurship, Mobile Apps, Web Platforms and more\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/localhost:8080\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"http:\/\/localhost:8080\/blog\/#\/schema\/person\/ce79759f6b091cdc302a422de3631ace\",\"name\":\"Maria Murillo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/localhost:8080\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ce61581ac90541c33e51f8fb21b5781f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ce61581ac90541c33e51f8fb21b5781f?s=96&d=mm&r=g\",\"caption\":\"Maria Murillo\"},\"description\":\"Since 2012, Maria has been traveling on different university grants. She currently works as a Marketer and Advertiser at Tictapps, a mobile development and business consultancy company in Buenos Aires, Argentina. She enjoys giving a boost to businesses by blending her young and multicultural perspective with long-term strategies. She is also passionate about the arts, foreign food, and sneakers.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/pub\/mara-murillo\/a2\/a48\/685\",\"https:\/\/x.com\/TICTAPPS\"],\"url\":\"https:\/\/thinkapps.com\/blog\/author\/maria-murillo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Basics of Front-End Development","description":"What is front-end development and how does it compare to\u00a0back-end? What techniques do front-end developers use? Read this post to find out!","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:\/\/thinkapps.com\/blog\/development\/basics-front-end-development\/","og_locale":"en_US","og_type":"article","og_title":"Basics of Front-End Development","og_description":"What is front-end development and how does it compare to\u00a0back-end? What techniques do front-end developers use? Read this post to find out!","og_url":"https:\/\/thinkapps.com\/blog\/development\/basics-front-end-development\/","og_site_name":"Build Blog by ThinkApps | Content on Entrepreneurship, Mobile Apps, Web Platforms and more","article_published_time":"2016-03-23T13:00:26+00:00","article_modified_time":"2016-04-15T23:47:27+00:00","og_image":[{"width":597,"height":297,"url":"http:\/\/d1vqbpto5tbbz0.cloudfront.net\/blog\/wp-content\/uploads\/2016\/01\/11135016\/Frontend.png","type":"image\/png"}],"author":"Maria Murillo","twitter_misc":{"Written by":"Maria Murillo","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/thinkapps.com\/blog\/development\/basics-front-end-development\/","url":"https:\/\/thinkapps.com\/blog\/development\/basics-front-end-development\/","name":"Basics of Front-End Development","isPartOf":{"@id":"http:\/\/localhost:8080\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thinkapps.com\/blog\/development\/basics-front-end-development\/#primaryimage"},"image":{"@id":"https:\/\/thinkapps.com\/blog\/development\/basics-front-end-development\/#primaryimage"},"thumbnailUrl":"https:\/\/d1vqbpto5tbbz0.cloudfront.net\/blog\/wp-content\/uploads\/2016\/01\/11135016\/Frontend.png","datePublished":"2016-03-23T13:00:26+00:00","dateModified":"2016-04-15T23:47:27+00:00","author":{"@id":"http:\/\/localhost:8080\/blog\/#\/schema\/person\/ce79759f6b091cdc302a422de3631ace"},"description":"What is front-end development and how does it compare to\u00a0back-end? What techniques do front-end developers use? Read this post to find out!","breadcrumb":{"@id":"https:\/\/thinkapps.com\/blog\/development\/basics-front-end-development\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thinkapps.com\/blog\/development\/basics-front-end-development\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/thinkapps.com\/blog\/development\/basics-front-end-development\/#primaryimage","url":"https:\/\/d1vqbpto5tbbz0.cloudfront.net\/blog\/wp-content\/uploads\/2016\/01\/11135016\/Frontend.png","contentUrl":"https:\/\/d1vqbpto5tbbz0.cloudfront.net\/blog\/wp-content\/uploads\/2016\/01\/11135016\/Frontend.png","width":597,"height":297,"caption":"Basics of Front-End Development - The Front-End"},{"@type":"BreadcrumbList","@id":"https:\/\/thinkapps.com\/blog\/development\/basics-front-end-development\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/localhost:8080\/blog\/"},{"@type":"ListItem","position":2,"name":"Basics of Front-End Development"}]},{"@type":"WebSite","@id":"http:\/\/localhost:8080\/blog\/#website","url":"http:\/\/localhost:8080\/blog\/","name":"Build Blog by ThinkApps | Content on Entrepreneurship, Mobile Apps, Web Platforms and more","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/localhost:8080\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"http:\/\/localhost:8080\/blog\/#\/schema\/person\/ce79759f6b091cdc302a422de3631ace","name":"Maria Murillo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/localhost:8080\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ce61581ac90541c33e51f8fb21b5781f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ce61581ac90541c33e51f8fb21b5781f?s=96&d=mm&r=g","caption":"Maria Murillo"},"description":"Since 2012, Maria has been traveling on different university grants. She currently works as a Marketer and Advertiser at Tictapps, a mobile development and business consultancy company in Buenos Aires, Argentina. She enjoys giving a boost to businesses by blending her young and multicultural perspective with long-term strategies. She is also passionate about the arts, foreign food, and sneakers.","sameAs":["https:\/\/www.linkedin.com\/pub\/mara-murillo\/a2\/a48\/685","https:\/\/x.com\/TICTAPPS"],"url":"https:\/\/thinkapps.com\/blog\/author\/maria-murillo\/"}]}},"_links":{"self":[{"href":"https:\/\/thinkapps.com\/blog\/wp-json\/wp\/v2\/posts\/6368"}],"collection":[{"href":"https:\/\/thinkapps.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thinkapps.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thinkapps.com\/blog\/wp-json\/wp\/v2\/users\/64"}],"replies":[{"embeddable":true,"href":"https:\/\/thinkapps.com\/blog\/wp-json\/wp\/v2\/comments?post=6368"}],"version-history":[{"count":34,"href":"https:\/\/thinkapps.com\/blog\/wp-json\/wp\/v2\/posts\/6368\/revisions"}],"predecessor-version":[{"id":6500,"href":"https:\/\/thinkapps.com\/blog\/wp-json\/wp\/v2\/posts\/6368\/revisions\/6500"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thinkapps.com\/blog\/wp-json\/wp\/v2\/media\/6230"}],"wp:attachment":[{"href":"https:\/\/thinkapps.com\/blog\/wp-json\/wp\/v2\/media?parent=6368"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thinkapps.com\/blog\/wp-json\/wp\/v2\/categories?post=6368"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thinkapps.com\/blog\/wp-json\/wp\/v2\/tags?post=6368"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}