preface

The discussion between Web app and Native app has been going on. Web App has the characteristics of low cost, high development efficiency and multi-platform support, and it does not need review and can be updated at any time. However, due to the quality of equipment and network communication, the browsing experience of users has been unable to surpass that of Native app. However, with the launch of various cross-platform frameworks such as React Native and Weex, front-end developers have the ability to develop Native applications. Compared with previous Web apps, the performance and user experience have been greatly improved. And the recent launch of wechat small program, the use of Web APP development to further expand. Web-related technologies are slowly eroding Native app territory. We should approach technology with an open mind, curiosity, continuous learning, and embrace change. Moreover, the flourishing ecosystem at the front produces a large number of frameworks and solutions, with many design ideas worthy of reference for us to learn. As shown in the figure below, as of October 11, 2016, Github has more than 1000 star class libraries, including 876 for Android and 619 for iOS (247 for Swift not included), and 2325 for javascript alone. Android plus iOS class libraries are only half of the front end.




Statistics. PNG




Making filtering. PNG

Taking advantage of this National Day holiday, I learned some front-end basic knowledge. This article mainly records some of the learning experience, and writes an example to illustrate the difference between iOS and front-end development. Let’s start our learning journey together.

Introduction to front-end development

First, a brief introduction to the basics of front-end development. The front end has three basics: HTML, CSS, and javascript. HTML represents the skeleton of a web page. It consists of many hierarchical tags. In iOS development, it’s like just dragging the controls into the Storyboard/XIB of the ViewController, laying out the hierarchy between the controls, not setting constraints, not setting styles. For example, put a label on a web page, adjust its position and its element hierarchy, as for the size and style of the label, do not set. CSS represents styles, defines how elements are displayed, and controls the layout and style of elements. IOS – like constraints plus IB property Settings. This is where you set its size position and style properties, such as font color size, position size, etc. Javascript represents an event response, similar to iOS, equivalent to a button event, gesture event.

Web App Calculator

We write a simple calculator using HTML, CSS, and javascript to perform four simple operations. The final result is shown below.




Web calculator

In this example, the third-party class libraries jQuery and Bootstrap are used. JQuery is a framework for simplifying HTML and javascript, and is often used to select HTML elements. Bootstrap Is an open source toolkit for front-end development.

Interface structures,

First, set up the interface of calculator in HTML, set up the hierarchy of each element, set up the “identification” of each element. The style and layout of the calculator, which is not set in this step, is handled in CSS. The code is as follows:










Electronic Calculator


            
            
      

                
       

                    
        
0

                
       

                
       

                    
        
0

                
       

            
      


            
            
      

       AC CE ÷ * 7 8 9-4 5 6 + 1 2 3 N 0. =
      

        Copy the code

The renderings are as follows:




Container creates a center area on the page that we can then put content from other locations into.

Page layout and style Settings

The layout of the page is different from iOS. Here we use the most basic layout, specifying the size and spacing of each element. Margin is used to set the distance between two elements, Padding is used to set the distance between an element’s border and its content, and float defines which direction the element floats. The effect is as follows:




Our code is as follows, where the shadow effect is achieved by setting the box-shadow property, which adds one or more shadows to the border. The property is a comma-separated list of shadows. Inset represents inner shadows. In the button area, some buttons cross rows, such as equal button, and some buttons cross columns, such as 0 button. The layout of these buttons realizes cross-row by setting its width, height and position. Button: Active Sets how the button looks when clicked, equivalent to highlighting in iOS.

body{ background-color: #818181; } #calculator{ width:300px; height: 410px; margin-top: 10%; margin-right: auto; margin-left: auto; background-color: #dfd8d0; border: 2px solid #908b85; border-radius: 20px; Box-shadow: 7px 10px 34px 1px rgba(0,0,0,0.68), inset-1px-6px 12px 0.1px #89847e; } #entrybox{ width:80%; height: 65px; margin-right: auto; margin-left: auto; background-color: #c3c2ab; border-radius: 6px; border: 2px solid #b4b39d; } .entry{ margin-right: 10px; font-size: 18px; } #buttons{ width: 280px; height:auto; margin-left: 15px; margin-top: 15px; display: inline-block; position: absolute; color: #fff; font-size: 16px; font-weight: bold; } button{ width:50px; height:40px; margin:0 4px 10px 8px; border: none; border-radius: 8px; background-color: #3a3a3a; box-shadow: 0 3px 0 0 #222121, inset -1px -3px 10px 1px #515151; } button: active {transform: translate (0, 3 px); box-shadow: none; } #equal-button{ height: 90px; margin-top: -50px; margin-left: 12px; position: absolute; } #zero-button{ width: 117px; } .red{ background-color: #a72d45; box-shadow: 0 3px 0 0 #671c2a; }Copy the code

Calculator business logic

Finally is the calculator implementation process, written in javascript. Business logic regardless of language, not much different from iOS, post code:

Copy the code

conclusion

In this example, we are just using basic front-end technology to demonstrate the front-end development process. Instance address: github.com/superzcj/Ca… Compared with iOS development process, it is found that the front end is faster and simpler in interface building and page layout. The animation is rich and simple, with a few lines of code to create a shadow effect; The debugging is simple and the changes take immediate effect. In iOS, it takes half a minute to compile a project with a certain scale. There are also rich and powerful third-party libraries like Bootstrap that can easily and quickly build beautiful pages. This article is mainly stand in the iOS development perspective to share the need to learn the front end of the foundation, I hope that we can have a superficial understanding of the front end development.