Modern web technologies

تقنيات الويب الحديثة

Modern web technologies

</> {}

!امرحب

Oday Alqarra

Frameworks

Front-end JavaScript Framework

Angular 2

1.3 Million

Developers

Google products in Angular 1

Angular 1 Releases

Angular 1 vs Angular 2

Angular 1

(angularjs.o

rg)

Angular 2

(angular.i

o)

0 300,000 600,000 900,000 1,200,000

93%

7%

October 20, 2015

Features & Benefits

Speed & Performance

Simple & Expressive

Cross Platform

Seamless upgrade from angular 1

Flexible Development

Legacy Browser Support

Animations

Compile to JavaScript

JavaScript is everywhere

TypeScript

Mobile Frameworks

Ionic

NativeScript

Cross platform desktop apps

Electron

Web Tech Open Source Cross Platform

Use HTML, CSS, and JavaScript GitHub and an active community Run on Mac, Windows, and Linux.

Built on Electron

Game Frameworks

Babylon.js

Task Runner

Why use a task runner?

Grunt

Gulp

Package Manager

NPMOVERVIEW

BowerOVERVIEW

NuGetOVERVIEW

Generation Framework

Back End

Web API

NodeJS

Firebase

Firebase Realtime Database

Firebase Authentication

Modern Web Layout

.كانت كذلكHTML Tables

.إنها كذلكHTML Tables

CSS 1

CSS 2

Back to HTML Tables

.إنها كذلك

Fixed Width vs. Fluid

.إنها كذلك


480P

.إنها كذلك


1080P

.إنها كذلك

Float Based

nav {float: left;

width: 200px;}

section { margin-left: 200px;}

Faux Columns

.إنها كذلك

Devices & Resolutions !

480P 1080P 1440P720P 4K 8K

Responsive Web Design

.إنها ليست كذلكالمزيد من التغيير قادم !

Flexbox CSS Grid Layout

Flexbox

1 2 3 4

Flexbox

4 3 2 1

Flexbox

4

3

2

1

Flexbox

1

2

3

4

Flexbox

2

3

1

4


Flexbox VS. Grid

One Dimension Two Dimensions


Flexbox VS. Grid

Lets content size itself Relies on defined gridlines

Hosted Web App

manifoldjs

دعنا نتحدث عن

.نصائح وتجارب

مشكرا على حسن استماعك

Oday Alqarra

</> {}

!سالم

Fb/Oday9

Software

Modern web technologies