ExtJS

Rich Javascript framework

Dmitry Rodichev / Dudes.io / @noroot

В недалеком прошлом

Административный интерфейс состоял из обычный таблицы 
	    



  

     ID 
     Title 
     
     Edit 
     Delete
и ajax запроса, зачастую только на DELETE и зачастую это даже не REST. (пример внешнего вида ниже.)

Внешний вид

# ID Title
1 My descent title Edit Delete
2 Another title Edit Delete
< 1 2 3 >

Проблемы ?

  • Code reuse
  • Javascript
  • Design convention

Решения

  • Ничего не менять
  • Писать свое ?
  • Найти готовое

Задачи которые решает современный front-end

  • Reusable custom element library
  • Dynamic layout
  • Responsive with screens
  • Localization, RTL
  • Animantion
  • Update screen when data changes
  • Application state, undo/redo navigation
  • Search / Sort / Filter / Group and validate data
  • Handle asynchronous calls to the server-side
  • Call out server-side code

Sencha ExtJS

Sencha Ext JS is the leading standard for business-grade web application development.

What the fuck are these?

Extjs background

ExtJS 1.0 add-on library which extends YUI Jack Slocum (Yahoo) Also support jQuery, Prototype. ExtJS 1.1 has no 3dparty dependecies

ExtJS 2.0 (2007) first UI framework provide interface features similar to desktop applications (GUI controls)

ExtJS 3.0 (2009) REST support, and Ext.Direct server side platform

ExtJS 4.0 (2011) New class structure + MVC scafolding

ExtJS 5.0 (2014) Touch devices, MVVM, two-way data binding, responsive layouts and other modern dev features.

Browser support

Ext JS 5 supports modern and legacy browsers including: Safari 6+, Firefox, IE8+, Chrome, and Opera 12+. On the mobile platform, Ext JS 5 supports Safari on iOS 6 and 7, Chrome on Android 4.1+, and Windows 8 touch-screen devices (such as Surface and touch-screen laptops) running IE10+.

License

Class system

  • Dot notation (".")

MyApp.utils.Base64 => /MyApp/util/Base64.js

Components

Layouts and containers

Data package

Events

Standard event binding

Tablet and touch screens and mobile

docs

  • Cordova
  • PhoneGap

Lifecycle

New Features extjs 5

  • 2 way data binding
  • MVVW Architecture
  • Routing
  • Tablet support
  • Themes (Metro UI, Material design, etc)
  • Widgets
  • Responsive layouts

MVVM

2 way data binding

Hello World

	    

Ext.application({
    name   : 'MyApp',

    launch : function() {

	Ext.create('Ext.Panel', {
            renderTo     : Ext.getBody(),
            width        : 200,
            height       : 150,
            bodyPadding  : 5,
            title        : 'Hello World',
            html         : 'Hello World...'
    });
});
See example

Examples

See all

Summary

  • Productivity
  • Scalability
  • Community
  • Compatibility

Конкретно

  • Готовые элементы из коробки
  • Стандарт дефакто в бизнес приложениях и соотвественно соотвественно готовая архитектра и методы разработки, описанные правила и продуманные решения стандартных проблем.
  • Лучшая документация
ExtJS vs AngularJS
What is ExtJS
dream or nightmare (Ycombinator)

Questions ?

Dmitry Rodichev
Author: Dmitry Rodichev
twitter: @noroot

DUDES.IO - dudes driven development

SPOCK RIP