SenchaCon 2016: Developing COSMOS Using Sencha Ext JS 5 - Shenglin Xu

51 views

Published on

This session will cover why Sencha Ext JS 5 was selected to replace the current Silverlight version and why Sencha Ext JS 5 is a great fit for COSMOS. Using Sencha Ext JS 5 as our framework has significantly reduced our development time and application performance is optimal. We will also discuss the challenges we encountered. We'll show you how we used the Ext JS Border Panel, Accordion, Tab panel, Grid and Panel UI components to display the COSMOS data structure in a very comprehensive manner.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
51
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

  • -information on Land Development, Utilities, Parks, Transportation, Crime and Land Use

    -ranging from simple identify, print and export capabilities to complex property report and search functionality

    -COSMOS is used extensively by City of Surrey staff and external users,

    -It is also provided to one neighbouring municipalities via a SaaS model that can be leveraged in the future for expansion to other municipalities.

    The old version of COSMOS was written using Microsoft Silverlight. It was launched in June 2012.





  • How about if user move street view window outside or the top bar is hidden?
  • An old version of COSMOS was built using Microsoft Silverlight. As Chrome browser does not support Silverlight any more, we started to rebuild COSMOS last June.

    BROWSERTOTAL MARKET SHARE 
    Chrome53.97% 
    Microsoft Internet Explorer 27.38% Firefox7.69% Microsoft Edge5.16% Safari4.28% Opera1.14%Proprietary or Undetectable0.21% Konqueror0.01% Android Browser
  • As Silverlight is a client side plug in. Its code behind is c# (compiled language), Silverlight version of COSMOS performs very good.
    Javascript is an interpreted scripting language. Generally speaking, complied language is faster.
    Although Javascript has increased speed dramatically in recent years, I am afraid it is still not as fast as Silverlight.
  • ESRI is an international supplier of geographic information system (GIS) software, web GIS and geodatabase management applications. The company is headquartered in Redlands, California.

    The company was founded as Environmental Systems Research Institute in 1969 as a land-use consulting firm. Esri products (particularly ArcGIS Desktop) have 40.7% of the global market share.[3] In 2014, Esri had approximately a 43 percent share of the GIS software market worldwide, more than any other vendor.[4]

    The company has 10 regional offices in the U.S. and a network of 80+ international distributors,[5] with about a million users in 200 countries.
  • My point here is that we need to let users and managers to understand that something Javascript framework could not do as good as Silverlight as the time being. Few years later, properly.
  • Developer’s programming experience is also an important factor for selecting Ext JS. Before developing COSMOS using Ext JS, I have coded two mobile apps using Sencha Touch 2. One is COSMOS mobile. A light version of COSMOS. The other is Surrey Request. Surrey Request is widely used by Citizens of Surrey to report issues such as missing stop signs, missing garbage pickup. The app has won an award from the Union of BC Municipalities (UBCM) in the Community Connection category.
  • Developer’s programming experience is also an important factor for selecting Ext JS. Before developing COSMOS using Ext JS, I have coded two mobile apps using Sencha Touch 2. One is COSMOS mobile. A light version of COSMOS. The other is Surrey Request. Surrey Request is widely used by Citizens of Surrey to report issues such as missing stop signs, missing garbage pickup. The app has won an award from the Union of BC Municipalities (UBCM) in the Community Connection category.
  • Tree panel and grid panel are exceptionally useful;

    Although I have Sencha Touch 2 coding experience,
    I did not have Ext JS coding experience. By training, I understood the framework better.
    From training, I know that Ext JS has lower level utility class for manipulating DOM element.

  • Border Panel out of box

    fits COSMOS Layout

    Convenient, saved time
  • Layer Store

    The id is used to find the layer when user identity the layer on the map by clicking it. It must be unique.
    Tree store has getNodeId method.
  • Generated by sencha command

    sencha generate theme -e ext-theme-neptune cosmos
  • ESRI  (Environmental Systems Research Institute) Javascript API 3.18 is used for COSMOS map component. As ESRI’s map requires a div id, we added it in center panel’ s html tag.

    Rich spatial overlay functionality: such as identify, buffer and query.

  • Under result accordion panel, they may be multiple address panels (up to 500). We found that creating 500 panels on the fly is slower than Silverlight version of COSMOS.
  • The solution is to create only 150 panels in memory and reuse them when if necessary. That is, if user selected a strata with more than 150 apartments, we show the first 150 ones first. When user scrolls down to the bottom , a pop up menu shows to let user see more. This idea is borrowed from mobile app.
  • sencha -sdk C:\Develop\ext-5.1.2 generate app cosmos cosmos
    First cosmos application name; second is folder name
  • We have not implemented one view on controller style because COSMOS has many views. Instead, we just use one controller, that is the main controller.
  • Javascript files

    Each main tools has a javascript file to handle view actions and map actions.
    The js file is self executed. The purpose of using it is to avoid global variables.
  • Complier.jar is used to minify js files and views.
  • Loading COSMOS is very fast, at least not slower than the Silverlight version. We know Silverlight application has a good performance.

    New COSMOS’ s performance is optimal.
  • Loading COSMOS is very fast, at least not slower than the Silverlight version. We know Silverlight application has a good performance.

    New COSMOS’ s performance is optimal.
  • We will start upgrading COSMOS to Ext JS 6 soon. We would like to get suggestions and ideas from Sencha Experts and other Ext JS developers. So that we can do a better job on the upgrade.
  • Building COSMOS is group effort supported by our GIS section from Managers, Project manager and every staffs in the team.
  • SenchaCon 2016: Developing COSMOS Using Sencha Ext JS 5 - Shenglin Xu

    1. 1. Developing COSMOS using Sencha Ext JS 5 Shenglin Xu GIS Analyst City of Surrey, British Columbia Canada
    2. 2. COSMOS (City of Surrey Mapping Online System) COSMOS - large scale web mapping application - over 400 layers of information - more than 15 tools - 20,000 unique visits per month - productized: SaaS model 2
    3. 3. COSMOS Demo
    4. 4. Splash screen Ext.window. Button’s transparency is achieved by setting button’s html tag with svg.
    5. 5. Search The search box is a textfield with a trigger. The display list is a grid panel. Use can search layer, address, park and many other features.
    6. 6. Search Result Click selected item on search list or use arrow down key to navigate and hit return key, the map will zoom to the selected feature and attributes will show on the left result panel.
    7. 7. Identify strata with more than 150 apartments If user scrolls down to the bottom, then a prop up menu will show to let user to select next 150 addresses.
    8. 8. Documentation Search Search property documentation saved in database or file folds by drawing a box on map.
    9. 9. Draw graphics Draw point, line or polygon using ESRI functions. Preview is implemented by setting container’s html tag with svg.
    10. 10. Measure Us grid panel to show the results.
    11. 11. Print Print or export map to pdf or other image formats using ESRI functions. Use loadMask to inform user the process.
    12. 12. More Tools This tool is mainly for creating mailing list. Click an address on map, the tool will buffer the point and select all addresses within it and show them on panels.
    13. 13. Street view Ext.window component. A nice feature of the window is buttons property.
    14. 14. Why rewrite? - Chrome browser does not support Silverlight - Chrome browser desktop market share : 53.97% - Chrome : one of the two browsers the city supports - Advancing of Javascript framework and HTML5 - Edge browser does not support Silverlight 14
    15. 15. Rewrite - Challenges Silverlight version COSMOS: - Tree panel with up to 400 layers, four levels of sub folders - Multiple levels of accordion panels - Good performance 15
    16. 16. ESRI -- Environmental Systems Research Institute - International supplier of geographic information system (GIS) software, web GIS and geodatabase management applications. - 43 percent share of the GIS software market worldwide, more than any other vender - 10 regional offices in the U.S. and a network of 80+ international distributors,[5] with about a million users in 200 countries - Many Governments use ESRI software 16
    17. 17. Rewrite Challenges– Silverlight still something better? 17 ESRI Silverlight API ESRI Javascript API
    18. 18. Why use Sencha Ext JS ? - Rich UI components - Tree panel and grid panel - ESRI Javascript API works well with Ext JS - In house experience 18
    19. 19. COSMOS Mobile - light version of COSMOS Surrey Request - Submit service request (awardfromtheUnionofBCMunicipalities) 19
    20. 20. Required Preparation - Purchased Sencha Ext JS - Sencha Training Ext JS 20
    21. 21. Sencha Components: COSMOS Layout
    22. 22. Sencha Components: COSMOS Layout Tool bar (north) Accordion Panel (west) Map (center)
    23. 23. - Four levels of subfolders - Up to 400 layers Sencha Components: Tree panel
    24. 24. Sencha Components: Tree panel The structure of the layer tree is set by a store. leaf : false folder leaf: true layer text : layer Name id: used to find layer source. { text: 'Community Services', id: 'Community Services', expanded: false, children: [ { text: 'Garbage and Recycling', id: 'Garbage and Recycling', leaf: false, children: [ { text: 'Collection Route Boundaries', id: 'Name:Road,Source:Public', checked: false, leaf: true },
    25. 25. Sencha Components: COSMOS Theme Component.scss packagescosmossassvar folder is used forCOSMOS base color, accordion color, button color and others. $base-color: #e37f1c !default; //accordion $accordion-header-background-color : #FFFFFF; $accordion-background-color : #F7F7F7; //$accordion-header-over-background-color : #e37f1c; $accordion-header-over-background-color : #faecde; $accordion-padding : 1px; $accordion-header-padding : 1px; $panel-base-color : #FFFFFF; $panel-body-background-color : #FFFFFF; $panel-frame-background-color : #FFFFFF; //#808080 grey $panel-body-border-color: #808080; $panel-border-color : #808080; $panel-header-border-color : #808080; $panel-frame-header-inner-border-color : #808080; //tab control and button $button-default-base-color : #808080; $button-default-background-color : #808080; $tabbar-base-color : #FFFFFF;
    26. 26. Panel.scss packagescosmossasssrcpanel folders is used to override neptune theme. .x-grid-cell-inner { overflow: hidden; padding: 3px 3px; white-space: nowrap; } .x-panel-header-title-default { color: white; font-size: 13px; font-weight: bold; font-family: helvetica,arial,verdana,sans-serif; line-height: 16px; } .x-panel-header-title-default { color: black; // background-color: #F7F7F7 !important;; } .x-panel-header-default { background-image: none; background-color: transparent; }
    27. 27. Challenges: Accordion panel action - Collapse one panel without opening the next - Override onBeforeComponentCollapse function in Ext.layout.container.Accordion Ext.define('cosmos.view.main.Accordion', { extend: 'Ext.layout.container.Accordion', /*Sxu, July 30, 2015 the folloiwng two lines are rquuired. */ alias: 'layout.accordion', type: 'accordion', onBeforeComponentCollapse: function(comp) { var me = this, owner = me.owner, toExpand, expanded, previousValue; if (me.owner.items.getCount() === 1) { // do not allow collapse if there is only one item return false; }
    28. 28. Challenges: Map component - ESRI shop - Third party required - Rich spatial functionality // map panel { xtype: 'panel', id: 'mapPanel', // margin: '30 0 0 0', region: 'center', html: '<div id='map'></div>', listeners: { resize : 'onMapPanelResize' } }}
    29. 29. - One strata with multiple addresses (up to 500) - Creating 500 panels on the fly is slower than Silverlight version. Challenges: Multiple Panels
    30. 30. Challenges: Multiple Panels - Solution: Reuse Panels - 150 panels in memory - idea is borrowed from our mobile app if (!addressTitle){ //create new addressTitle = createTitlePanel(pAddress, pID); addressTitle.showAt([-500,-500]); showAddressList.push(addressTitle); } else { if (!addressTitle.getCollapsed()){ //collapse open panels if any adjustGridPanelHeight(addressTitle, false); addressTitle.collapse(); addressTitle.setIconCls('iconArrowClose'); } //reuse panels addressTitle.setId(pID); addressTitle.setTitle(pAddress); }
    31. 31. Under each address panel, there are six grid panels which show property data. Those grid panels are created only once. Coding Efficiency: Multiple grid panels
    32. 32. Grid Panel Reuse - Property data grid panels are stored in a list. The list will be added to its parent panel items when used. - Load component or javascript file only when it is being used. /* * initialize grid panels once */ var initilizeGridPanels = function() { try { if (!propertyGridCmp){ propertyGridCmp = createPropertyGrid(); propertyGridCmp.showAt([-500,-500]); propertGridList.push(propertyGridCmp); }
    33. 33. COSMOS code structure - Code structure is generated by Sencha CMD: sencha -sdk C:Developext-5.1.2 generate app cosmos cosmos - Three folders added for custom css, js and configure json files
    34. 34. MainController - There are no actual code in main controller. Serve as a bridge to javascript file. - its size is small. /Ext.define('cosmos.view.main.MainController', { extend: 'Ext.app.ViewController', requires: [ 'Ext.window.MessageBox' ], alias: 'controller.main', /* * Layer list tools */ onAerialPanelClick : function() { CSLL.onAerialPanelClick(); }, onAerialPanelMouseover: function(e) { CSLL.onAerialPanelMouseover(e); }, onAerialPanelMousel
    35. 35. Javascript file Avoid global variables. - js file is self executed - handles view actions and map actions. var CSLL = (function (window, Ext, undefined) { var theRef = "", /* * */ var getLabeLayerList = function() { if (labelLayers.length === 0) { var rootNode = layerListStore.getRootNode(); getLabelAllFolders(rootNode); } return labelLayers; };
    36. 36. Build and deploy sencha app build java -jar compiler.jar server
    37. 37. Performance Test
    38. 38. Summary - Good Performance - Better look & feel - Satisfied Users - Browser Agnostic Success!
    39. 39. What’s Next: - ExtJS6upgrade - WROMS (WhiteRockOnlineMappingSystem) - Agilereleaseofenhancements - Mobilereplacement - COSMOS“Product”work -moreconfigurablecomponents -UIreview
    40. 40. Recognition: - GIS Section - Sencha Support Thank you!
    41. 41. Shenglin Xu sxu@surrey.ca 604 591 4491

    ×