New York Tech Journal
Tech news from the Big Apple

HTML5: #tools for web developers and using #Ajax for real-time updates

Posted on June 2nd, 2015

NYCHTML5

06/02/2015 @Lab49, 1345 Ave of the Americas, NY

20150602_195448[1] 20150602_201821[1]

Three speakers talked about a variety of tools for developers.

Live updating DOM elements without a framework – Rose Weixel

React and React Native – Mayank Patel

Markup workflow and snippets- Kirill Cherkashin

The first speaker, Rose Weixel, spoke about using Ruby and #Ajax to provide real-time web updates. Her nail-polish sharing site (www.lacquerlove.com) requires updates whenever anyone in one’s network updated their status. This means, that unlike in many examples, the user does not initiate the update, so updates of the back end information signal a need to update the display since the trigger event is on another client.

She then walked through three solutions

Solution 1 – refresh continually by calls to Ajax every 3 seconds –but this causes excess refreshing and refreshes the entire div. Also refreshes any fields that the user might be entering data.

Solution 2 –don’t refresh if date due field is inFocus. This allows the user to enter data without interruption, but it’s still inefficient

Solution 3 – output all transactions and states so they are stored in the local page. Then the back and front ends can be compared by the back end whenever there is a trigger event in the back end. So, the front end is only updated when new information arrives at the back end and only the parts of the DOM that need to be updated are updated.

Next, Mayank Patel@inRhythm introduced #React (a preprocessor for #JavaScript) as a way to speed page updates and simplify JavaScript syntax. He also talked about React Native which brings the power of React to native mobile developers.

Mayank gave examples on how React has a more streamline syntax than JavaScript:

  1. Assignment of several values in a single line of code
  2. Arrow functions – shorten function definitions by eliminating the need to include ‘function’ in the definition
  3. Shorten the function definition

He also talked about how React renders changes in the virtual DOM viewed by the user prior to making changes in the actual DOM.

Mayank next described how React Native is a version of React that can speed iOS development. As in web development, Reactive Native speeds up the UI. But it also provides the ability to speed development by eliminating some recompilations of the code since React and JS can be imported and run directly on the interpreter.

Do not yet have an Android version, but it is in development.

Kirill Cherkashin spoke about a diverse set of tools for developers:

  1. #PixelPerfect
  2. #Emmet
  3. #Workspaces
  4. #ColorPicker
  5. #Snippet

Pixel perfect is a Chrome plugin that allows you to place and resize an image over other web content. Since the image can be make partially transparent, the image can be sized to correctly fit with other elements of the page.

Emmet is a plugin within text editors that makes it possible to abbreviated entry of html structures. For instance, instead of needing to fully type in div class as :

‘<div class=xxx></div’ one need only enter ‘div.class’

Two tested classes can be entered as ‘one.two’

And so forth.

Workspaces are Chrome devtools so edits of css lines are immediately reflected in the formatting of elements.

Color picker allows one to hover on the page and pick colors from elements.

Snippet can create and store snippets of code.

posted in:  javaScript, NYCHTML5    / leave comments:   No comments yet