GDG web development topics including #AngularJS & #MaterialDesign, #Hypergrid & #Polymer
Posted on February 22nd, 2015
02/20/2015 @ Google Chelsea Market Office, 75 9th Ave. NY
There were two technical presentations. The first by Steve Wirts@OpenFin on “HyperGrid: An Open Source HTML5 Grid Component”. The second by Daniel Zen@ZenDigital on Material Design In Practice With AngularJS“.
There were also two shorter talks. The first, “Get Involved: CS Education in NYC” Speaker: Cindy Gao (Chief of Staff, CSNYC) and the second by Jeff Posnick @Google on “sw-precache: A Service Workers module for offline website operation”
In the first talk, Steve Wirts demonstrated the advantages of using HyperGrid: one can scroll, search and zoom rows and columns in a spreadsheet with over 1 million rows.
Hypergrid is an open source, ultra-high-performance Chrome-based browser designed to display very large grids such as the portfolio holdings of large banks. It makes extensive use of polymer, an open source tool to create and manipulate web components. Using polymer, Hypergrid encapsulates the tags connected to the various links needed to speed performance while simplifying the code. Web components make it easier to label the tools within a page.
Hypergrid also uses Vulcanize to flatten dependencies and reduce network requests.
Steve next talked about lessons when creating HyperGrid. These include:
- Knowing good game design helps in all development – He recommends the book “Html5 Game Design Insights”
- Be sure you understand the ins and outs of device pixel density
- Talking to graphics context is expensive so only iterate/render what an item is visible
- Border rendering, background fill per cell is extremely expensive, so employ polymer so updates are done on rows or columns, not on individual pixels
- Test your changes on all browsers
- Vulcanize is NOT an intermediary tool. Use it for final deployment only
- Use a rectangle based selection model, not an irregular shape
- Take advantage of Polymer plugin code
Daniel Zen talked about Material Design, an increasingly popular paradigm for UI design. Material Design gets its name and inspiration from the physical world inhabited by materials that we manipulate and whose physical appearance clues us into its function.
More specifically, Material Design is a system for visual, motion, interaction design based on the following notions:
- material is the metaphor
- bold, graphic, intentional images – core functionality should be immediately apparent
- motion provides meaning especially when the user initiates the motion. Animation highlights the process of the change as the interface moves from one mode (e.g. button pressed to open a window) to another mode (e.g. the new window appears)
To implement these notions, flat sheets appear in a 3-dimensional environment with sheets placed on a flat surface. This effect is enhanced by using keylights, ambient light and shadows to indicate distance to a base level. The movement of each sheet signals to the user concepts of light/heavy, flexible/rigid, small/large. Popups appear to grow from the button initiating the popup. Bold images are enhanced by limiting the colors to two pallets: a primary (3 colors) and a secondary (1 color). Other visual effects such as a scrim behind the text make the text easier to read.
Daniel next showed how Material Design interfaces can be implemented using two different methods.
One uses AngularJS material directives which create tags starting with “md_” and take advantage of css layouts built on flexbox.
An alternative is to use web components implemented using polymer (loaded first) and angular.
Another alternative is Materialize which is a css library for material design which does not need angular or web components.
Cindy Gao spoke about the opportunities to help teach programming part time in the public schools.
Jeff Posnick spoke briefly about Service Workers, which can be attached to Chrome to make web pages look more like native applications when displayed on a mobile device. The service worker is attached to the browser once the page is loaded and will stay there when the page is brought back much later. This gives additional capabilities to a web site including detecting when an internet connection is not available and executing fallback actions, such as getting information from a local cache (which can be set up at build time).
The Service worker can also schedule a background sync and acts like services that run independently on your chrome browser. Jeff will be providing more details in future meetings.
In a previous post I noted that Microsoft also has an initiative to make web-based mobile apps look and feel more like native apps: Web App Templates (WAT) which provides tools for mobile developers to locally modify the look of pre-existing web pages.