Front-end development for Mobile Applications with Javascript frameworks. Front-end, HTML5/CSS3/JS, CSS Preprocessors, Build System and Development Environment

The world of JavaScript is a rich environment with dozens of tools, libraries, and frameworks. The objective of this article is to analyze how to take advantage of these frameworks to create solutions adapted to devices mobiles.

To do this, I recommend solving the following questions

1. Definition of Front-end

Indicate which ones and explain why some of the following statements are false:

• Today, front-end is a term linked exclusively to web browsers and the development of applications for smartphones and tablets.
  False. Front-end is currently not linked only to a programming language within the process of a web project. The adaptation of web technologies and languages has led to their inclusion in developments for countless devices such as smartphones, tablets, televisions, consoles and even wearables.
• One of the areas where we will never use Front-End development is in the development of applications. server.
  False. The jump from JavaScript to the server side with Node.js has allowed the development of applications Front-End on server.
• The development of SmartTV applications is one of the areas of application for the development front-end.
  True.
• Front-End development through the browser is only possible in the most modern browsers that have Implemented all HTML5 standards.
  False. The HTML5 standard has meant a quantitative and qualitative leap in the capabilities offered by browsers but there were already Front-End developments with the HTML4 standard.
• The intensive and globalized use of the Internet has favored the rise of FrontEnd development.
  True.
• The appearance of the iPhone and its touch screen marked a notable change in the Front-End approach mobile
  True

3. CSS Preprocessors

The CSS language is one of the points in Front-End development that, due to the rigidity of its language, is more difficult to maintain and edit. The appearance of CSS preprocessors fulfills the task of facilitating greater flexibility.

• Quote 2 preprocessors currently in use.
  LESS It is a CSS processor characterized by its ease of use and simple syntax. Your popularity lies in its diversity. This compiler has been exported to many languages but the one that is most famous achieved is the JavaScript version that allowed for on-the-fly compilation on the page itself.
  Sass: It is on a processor, ported to different languages that can be executed directly on the browser. Sass has two available syntaxes:
  • SCSS: A CSS extension, which simply allows you to use CSS sheets like SCSS.
  • Sass: It has code reduction mechanisms such as the use of keys and their indexing.
• List 4 improvements brought about by the use of CSS preprocessors in our workflow with style sheets cascading (CSS).
  • Code reuse through mixing and inheritance.
  • Better management of related files and dependencies.
  • Optimization of the resulting code
  • Better testing and detection of errors in the code.
• Explains the workflow for incorporating the use of preprocessors into a Front-End project.
  The workflow to incorporate the use of preprocessors in a Front-End project is based on the organization of the project and carrying out a pre-build process before publishing the project.
  In order to run a processor it is necessary to distribute the work in different folders, each one with different functionalities to optimize and make the project compilation task easier. We, when If we need to publish our work or test it in the test environment, it will be It is necessary to apply a compilation of all the files used and, to carry out this task, it will be necessary configure where and what files they are.

5. Development environment

As a front-end development professional, it is essential to have an environment and work tools that allows us to focus on development and not on other tasks that with the current state of technology can be optimized and even automated.

Cite the different sections related to the creation of a work environment for development front-end and makes a combined proposal of environment, tools, languages and workflow to have guarantees to expedite and control development. Briefly explain the cause or characteristic that causes You bet on that choice in each section, compared to other existing alternative solutions.

Below I am going to analyze the different programs that I have used for front-end development in Windows, explaining the reasons for my choice and its comparison with other systems.

• Operating System: In my case, my development environment is installed on a Windows 10 machine for the convenience of having a large number of programs adapted to the OS within reach. Other systems like Os for Mac or Mint for Linux, I know them, they are very powerful but sometimes some programs have given me compatibility issues.
• Web Server As a web server we will use XAMPP, freely available for the different Mac, Windows and Linux platforms. In my case, my second option was to install a Virtual Machine with Virtualbox and perform a setup of a Mint machine manually, installing Mysql and Apache from the repository and configuring the entire environment according to the needs of the project. This second option causes many more problems and is more complicated than the first, without thinking that it consumes many resources.
  Another native option on Windows could be EasyPHP, a widely used software similar to XAMPP but, in my opinion, opinion, not so simple.
• Editors and IDEs There are two common ways to work with code: using an Environment integrated development (IDE) or the use of a modern editor adding the appropriate plugins for our work.
  I personally have used Webstorm IDE. I know it from using it with Symfony and I recognize that it helps in editing, project organization and ease of installing plugins. Another similar system, but not as powerful in the web environment is Eclipse (in my opinion it has more plugins but it is much more difficult to configure and adapt). Visual Studio is also an interesting tool but without as many plugins as WebStorm.
  When I want to perform a quick monitoring task, and I don't want to load the entire IDE which consumes a lot resources I use a text editor for Windows called Notepad++. This editor has quite a few plugins, it consumes few resources and allows you to edit files quickly. Other options that I don't like so much would be Notepad (practically impossible to edit anything).
• Version control For version control we will use Git. As a repository manager we will use Gitlab. It is free and allows you to have both public and private repositories.
  Finally, and although you can work with Git directly via the command line, to certain tasks it is usually much more practical to use a Graphical User Interfaces = GUI). Therefore, to manage our repositories you can install SourceTree, which is a free tool and multiplatform. Other options could be GitHub or Bitbucket, although I don't know much about it, GitHub doesn't allow private projects without premium accounts.
  Another option is to use svn repositories such as Tortoise SVN, but since it works only with Window it could pose a problem if we migrate our work environment.
• NVM, NODE.JS and NPMThe appearance of node.js, and especially its npm package manager, is one of the greatest advances in recent years in professional development in Javascript. On a practical level, Npm will allow you to easily install thousands of open-source tools that we will see as we progress in the course.
  Professionally, it may happen that for different projects you have to work with different versions. of Node.js (old projects, incompatibilities between some packages, etc.). This may mean having to often install/uninstall versions of node.js, which can be cumbersome and not very advisable from a productive point of view. For this reason, I advise you to install nvm (Node Version Manager). Once nvm is installed then you can through this install/add the versions of node.js that suit you. With a simple command line instruction you can switch from using one version to another.
• BUILD SYSTEM: Automate tasks with GulpTo automate tasks we will use Gulp. The Installation is done very easily via npm and is explained on the official website. As we have already mentioned previously, it is a younger alternative to Grunt but that has quickly gained many followers and that in the It is currently considered more flexible than Grunt and is beginning to be more widely used. The automation of tasks that we provides Gulp is better than Grunt because:
  • Gulp in general offers better performance than Grunt by making use of the existing stream concept in nodeJS, which allows tasks to be executed with maximum concurrency.
  • Gulp offers greater flexibility by moving away from the rigidity of configuration structures and relying in pure JavaScript code, with all its logic at our disposal.
  • Gulp provides us with a simple and unified API for the main mechanisms of action, as we have seen before.
  • Gulp supports asynchronous tasks.
  • All Grunt functionality is based on plugins, in the case of Gulp many tasks can be performed without requiring a plugin for it.
  • In Gulp we have learned from Grunt's mistakes and have been much stricter and have established some style guides to comply with, for anyone who wants to develop a plugin, which translates into a Greater consistency across all plugins.
  • Gulp allows us to use standard libraries to achieve what we want, being conventional JavaScript.
  • Plugins in Gulp have much more limited functionality, they do less and are therefore simpler, because the goal for the tasks is to combine them.
• JavaScript In our environment we should use Typescript, a Javascript superset compatible with our IDE. Another option would be Traceur with similar characteristics but not as expanded.
• CSS preprocessorsAs a preprocessor we will use SASS (in its .scss file extension). It should be noted that historically LESS and Sass have been the main competitors, having gained some Sass advantage today, as demonstrated by the fact that some of the major front end frameworks, like Bootstrap, which were based on LESS have migrated to Sass in their latest versions. Another aspect to comment is that normally GULP environments use Sass.
• Debugging and testingFor this purpose we can use Webstorm debugging and testing (debugging, testing and help for typescript, possibility of adding watchers to detect changes in the code and launch a action, etc.) It also offers a free extension for Chrome and Firefox that can be very useful.
  Furthermore, with Browsersync it not only allows us to refresh the changes made to the code in multiple browsers at once, but rather allows browsers to belong to different computers, including mobile devices. Furthermore, as its name indicates, its main functionality is that it synchronizes all these browsers to keep the view in the same place including actions such as scrolling, clicks, filling fields form, simulation of different network states to test less favorable scenarios, management of URL history to recover them on all devices, etc.
  Finally, the browsers themselves offer more and more very useful debugging and testing tools. advisable. Among them, perhaps I would advise you above all to use Google Chrome, which Angular offers, at least currently, a more precise debugger.

6. Gitlab

in the url https://github.com/al118345/todo-app/tree/master You can find an example of a javascript project for mobile devices.