اهمیت یادگیری تکنولوژی های سمت کاربر چیست؟

تکامل (سریعتر) تکنولوژی های سمت کاربر

حمل پذیری بالا

هزینه تولید کمتر

تعامل بالا

اکو سیستم پویا

“Any application that can be written in JavaScript, will eventually be written in JavaScript.”
 — Jeff Atwood 2007, Author, Entrepreneur, Cofounder of StackOverflow

Atwood’s Law

برگی از تاریخ

علی

سال 78 از دانشگاه فارق التحصیل شد
برنامه دسکتاپ با C , Delphi
برای ورود به بازار وب، PHP را یاد گرفت
کمی هم JavaScript یادگرفت برای اعتبار سنجی فرم ها و پویا سازی و ...
یادگیری Java و Object-C برای نوشتن برنامه های موبایلی

نازنین

دوسال قبل فارق التحصیل شد
یک وب اپلیکشن متوسط با معماری MVC انجام داد
برای Android و iOS برنامه موبایلی نوشت
برای Windows و Linux و OSX برنامه دسکتاپی نوشت
در حال نوشن برنامه های Serverless هست

JavaScript

What is JavaScript?

Interpreted

High-Level
Dynamic
Weakly typed
Prototype based
Multi-paradigm
- Event driven
- Object Oriented
- Functional
- Imperative

Brandon Eich

1995
Scheme
Java Syntax
10 Days
Name
- Mocha
- LiveScript
- JavaScript™

Influence

Self
- Prototypal inheritance
- Dynamic objects
Scheme
- Lambda
- Loose typing
Java
- Syntax
- Conventions
Perl
- Regex

Scheme Sample

(let loop ((n 1))
  (if (> n 10)
      '()
      (cons n
	    (loop (+ n 1)))))

===> (1 2 3 4 5 6 7 8 9 10)

Many contrast

Best ideas
Worst Ideas
And a lot between

Good, Bad, Ugly

JavaScript Program

ECMAScript

Platform (Browser, Node, Mobile, ... )

Run-time (V8, Spidermonkey, Chakra, ...)

Node vs Browser

JavaScript Is Everywhere

Chrome - V8
Firefox - SpiderMonkey
MS Edge - Chakra

Web Browser

Node?
Rhino
Deno

Server

Electron
AppJS
nodewebkit
Bracket Shell

Desktop App

Cordova
Capacitor
NativeScript
ReactNative

Mobile App

MongoDB
PunchDB
NeDB

Database

Espruino
Duktape

IOT

Statistics

StackOverflow - Developer Survey Results 2020

Languages That Compile To JavaScript

Dart
TypeScript
Elm
PureScript
CoffeScripts
ClojureScript
Scala.js
Reason

Ecosystem

http://www.modulecounts.com/

What is ECMAScript?

ECMAScript Versions

Edition	Formal name	Release date
ES10	ES2019	June 2019
ES9	ES2018	June 2018
ES8	ES2017	June 2017
ES7	ES2016	June 2016
ES6	ES 2015	June 2015
ES 5.1	ES 5.1	June 2011
ES5	ES5	December 2009
ES 4	ES 4	Disposed
ES3	ES3	December 1999
ES2	ES2	June 1998
ES1	ES1	June 1997

ECMAScript 6 Browser Support

Transpile Vs Compile

Babel

Bundle

Course Content

Language

Building Blocks
Dynamic Programming
Object Oriented Programming
Debugging
Serialization
Reflection
Events
ES6 Features

Async

Async vs Sync
Callback
Promise
async/await
Observable

UI

DOM
Validation
Animation
Event Handling
Drag & Drop
Keyboard Events

Data Transfer

Ajax
CORS
Web Service
JSON
Binary File
JSONP
GraphQL

JavaScript Libraries

JQuery
- Plugins
- DOM Selection
- DOM Manipulation
- Event Handling
- Ajax
Handlebars js
Lodash
Ramda
Leaflet

Tips

JavaScript Template
iFrame
Security
HTTP Message
Obfuscation
Minifying

HTTP

Hypertext Transfer Protocol

URL

Uniform Resource Locator

Web Server
- Responses to HTTP Requests
- Runs in server-side
- Dynamic/Static content
- Full access to server resources
- Example
  - Apache
  - IIS
  - Tomcat

Web Browser
- Runs in client
- Render content
- Example
  - Chrome
  - Firefox
  - IE
  - Safari

Web Site

vs

Web Application

Request / Response

URL
Header - None mandatory
Method
Body

HTTP Request methods

Response Status Codes

Informational 1XX
Successful 2XX
Redirection 3XX
Client Error 4XX
Server Error 5XX

More Details https://httpstatuses.com/

https://http.cat/

HTTP/1.1 vs HTTP/2

http://www.http2demo.io/

Caching

Why is this important?

Main Types of Client-Side Caching

HTTP Response Code
JavaScript/Ajax
HTML5/PWA

How to disable in development mode

HTML

Hypertext Markup Language

Element vs Attribute

Sample HTML

<!DOCTYPE html>
<html>
  <head>
    <title>This is a title</title>
  </head>
  <body>
    <p>Hello world!</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <title>Login</title>
  </head>
  <body>
    <div class="container">
    <div class="row">
    <div class="span12">
      <form class="form-horizontal" action='' method="POST">
        <fieldset>
          <div id="legend">
            <legend class="">Login</legend>
          </div>
          <div class="control-group">
            <!-- Username -->
            <label class="control-label"  for="username">Username</label>
            <div class="controls">
              <input type="text" id="username" name="username" placeholder="" class="input-xlarge" required data-validation-endpoint="check-username-exists.php" >
            </div>
          </div>
          <div class="control-group">
            <!-- Password-->
            <label class="control-label" for="password">Password</label>
            <div class="controls">
              <input type="password" id="password" name="password" placeholder="" class="input-xlarge">
            </div>
          </div>
          <div class="control-group">
            <!-- Button -->
            <div class="controls">
              <button class="btn btn-success">Login</button>
            </div>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
    </div>
  </body>
</html>

Minify vs Uglify

CSS

Cascading Style Sheets

CSS Selectors

CSS Selector Usage

CSS
DOM Selection
- querySelector/querySelectorAll
- jquery
HTML code generator

Resources

CSS Diner
- https://flukeout.github.io/
W3School
- https://www.w3schools.com/cssref/css_selectors.asp
Learn
- https://learn.co/lessons/css-selectors
Game - Cheat Sheet
- https://frontend30.com/css-selectors-cheatsheet/

Emmet

#page>div.logo+ul#navigation>li*5>a{Item $}

<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
    </ul>
</div>

به نام خدا

آموزش JQuery , JavaScript , Ajax (برنامه نویسی سمت کلاینت)