1 of 17

STEP INTO FRONT END

By: Mohamed Rabie Elmdary

2 of 17

Contents:

  1. What is front end?
  2. Languages.
    1. HTML.
    2. CSS.
    3. JavaScript [JS].
  3. Learning curve.
  4. Frameworks.
    • Most popular.
    • Learning curve.
    • Pros - Cons.
  1. Cross Platform.
    1. Well known ones.
    2. Pros.
    3. Cons.
  2. Example.
  3. References.
  4. Q & A.

3 of 17

  1. What is front end?

Front-end web development is the practice of converting data to a graphical interface, through the use of HTML, CSS, and JavaScript, so that users can view and interact with that data.

4 of 17

  1. Languages
  1. HTML: Hypertext Markup Language

It’s the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript.

  1. CSS: Cascading Style Sheets

It’s a style sheet language used for describing the presentation of a document written in a markup language such as HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

  1. JavaScript - JS ( Does not relate to Java )

It’s a programming language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time compiled, and multi-paradigm. It has curly-bracket syntax, dynamic typing, prototype-based object-orientation, and first-class functions.

​

5 of 17

  1. Learning Curve

HTML

Html is easy to learn because it has a base structure that every single element use.

​

​

​

​

​

6 of 17

  1. Learning Curve

CSS

Css is easy to learn because it has a base structure for applying any property to any html element.

​

​

​

​

​

7 of 17

  1. Learning Curve

JavaScript

  1. Variables
  2. Types
  3. Function
  4. OOP
  5. Built in data structure
  6. Browser Api
  7. Async operations
  8. Document object (DOM for browser only)
  9. Window object (BOM for browser only)
  10. Modules
  11. Iterators
  12. etc...

8 of 17

  1. Frameworks

Most Popular

  1. React (Library) [react - 8,990,310 npm/week - 159K Star ]
  2. Angular 2+ [@angular/core - 2,120,634 npm/week - 68K Star ]
  3. Vue [vue - 1,974,458 npm/week - 175K Star ]

​

  1. Stencil
  2. Svelte
  3. Lite element

9 of 17

  1. Frameworks

10 of 17

  1. Frameworks
  • Props
    1. Less development time.
    2. Reduce learning curve for the team.
    3. Using the web standards.
    4. Require less maintenance.
  • Cons
    • Introduce challenges in engineering.
    • Corner cases (Limitations).
    • Performance issues (depends on the developer experience).
    • Big output bundle.
    • Compatibility issues.

​

11 of 17

  1. Cross Platform

Well Known Frameworks

  1. Mobile
    1. React Native (React)
    2. Native Script (React & Angular & Vue)
    3. PhoneGap (JS)
    4. Ionic
  2. Desktop
    • Electron
    • Nwjs
    • AppJS
    • Meteor
    • Proton Native

12 of 17

  1. Cross Platform

Pros

  1. Easy to learn.
  2. Easy to test.
  3. Faster to build.
  4. One code for multiple platforms.
  5. Less cost.
  6. Large community.
  7. Fast Applications.
  8. Hot module replacement.

13 of 17

  1. Cross Platform

Cons

  1. Compatibility issues.
  2. Performance issues.
  3. Limitation (sometime it requires to use native code to implement core feature).
  4. Native developer still needed.
  5. Support of latest platform features.
  6. Lack of modules / Libraries.
  7. Big bundle size.

14 of 17

  1. EXAMPLE TIME

15 of 17

  1. References
  1. Circle Road Map
  2. General Road Map
  3. Web Skills
  4. CSS Reference
  5. Awesome Front End Guide
  6. MDN
  7. CodePen

16 of 17

Q & A

17 of 17

Thanks For Attendance

@Cat Reloaded Front End Circle