Jonathan Jeter

Director of Application Development

Home Archives for JavaScript

Realtime for Reals – Front Porch Front-End Developers Conference, Dallas, TX

By Leave a Comment

Choose your captain: kirk vs picardPresented by Alexis Abril

FeathersJS is a wrapper for Express that allows you to easily create shared RESTful web services and real-time APIs using SocketIO and other websocket libraries.

Feathers revolves around the concept of service objects.

  • find
  • get
  • create
  • update
  • remove

Live coding the demo was awesome! Choose YOUR favorite Captain! Kirk vs Picard.

Storing data store in an array, but you could use a database. Using

Most of the best presentations have few notes because it was very interesting and included a lot of live coding. Github repo.

Client <-> Feathers <-> REST <-> DB

Dallas js meetup @dallasjs

 

Intro to WebGL and Three.js – Front Porch Front-End Developer Conference, Dallas, TX

By Leave a Comment

David Lyons - Intro to WebGL and Three.js - Front Porch Front-End Developer Conference, Dallas, TXPresented by David Lyons

What are people using WebGL for

  • games
  • interactive demos

three.js

  • 3D JavaScript Library – what would take hundreds of lines of code with raw WebGL only require a few lines using three.js

All three.js projects have the following elements:

  • scene
  • aspect
  • camera
  • renderer

WebGL - three.js geometryRotations use radians (using pi)

Lots of math, but lots of elements to help you figure out how to do it. Mesh, shading, colors, textures, shininess, etc., etc.

You can load in ojbects via the JSON loader with a python tool that’s included (must be Python 2.7).

Interactions

In 3D you have to use “picking” to select items. You don’t have the browser interactions available.

Great stuff on three.js from David Scott Lyons on his site!

Read the rest of Intro to WebGL and Three.js – Front Porch Front-End Developer Conference, Dallas, TX

HTML5 Texas JavaScript Workshop – Client-Side Storage

By Leave a Comment

HTML5TX JavaScript Workshop - Pamela FoxWeb technologies have taken a long time to progress.

A lot of the standards we see today are because browsers decided to implement new features.

HTML5 is now just supposed to be HTML. It is supposed to be a living standard.

Pamela needs an HTML app that helps choose her hair color.

Client-Side Storage

Cookies are used for all types of tracking, but they have issues with security, user trust (can be disabled), performance and size.

In the HTML spec, they considered the issues and came up with the following solutions.

Read the rest of HTML5 Texas JavaScript Workshop – Client-Side Storage

localStorage

  • Key / value pairs – hash table
  • Persistent on page reloads
  • Avoids HTTP overhead of cookies

Model-View-Websockets

By Leave a Comment

by Garann Means at HTML5 Texas Conference in Austin, TX

Many front-end developers are familiar with MVC, and almost all are familiar with event-driven architectures (even if they call them something else). How do those two philosophies work together? And, more importantly, how can websockets help future applications become more responsive, more consistent, and easier to develop? We’ll reexamine the Controller concept from MVC and figure out how to combine simple browser messaging and websockets to address our application needs and improve our user experiences.

Model-View-WebsocketsJavaScript

Did well for a while without patterns and frameworks, but once we realized its potential we added everything at once, adding complexity and functionality.

#singlepageappaproblems

Single Page Applications (SPAs) today are everywhere, as well as SPA behavior on static pages, requiring 3rd-party tools and systems of dependencies. It’s easy to set up, but difficult to maintain.

Read the rest of Model-View-Websockets

HTML5 TX 2013

By Leave a Comment

HTML5 TX Opening CircleToday is the 2nd annual HTML5 Texas conference at St. Edwards University in Austin. Looking forward to learning some great HTML5 goodness today.

Important things for today:

  • Parking is available in any lot except the red lots (resident parking)
  • Great sponsors
  • Hackython with free copies of Kendo UI
  • Closing Party tonight

Open Spaces – Alan Stevens

HTML5TX Open Spaces by Alan Stevens

Open spaces technology allows for the important stuff that goes on at conferences in the hallways. An open space is a place where you can run an impromptu session on any topic. The first step is to propose a topic that you’re passionate about. It doesn’t have to be related to other topics or the conference at all. Announce your topic and your name and put it on the board in one of the areas available. The only other responsibility is to show up. Then you can do whatever you want. Give a lecture or a presentation or a conversation. If no one shows up, that’s okay, too. Just stay there and see what happens. It is an amazing experience.

Read the rest of HTML5 TX 2013

Client-Side Templating in jQuery at South by Southwest Interactive #SXSW2012

By Leave a Comment

JQuery - Image via Wikipedia

Sunday, March 11, 2012 – South by Southwest Interactive, Austin, Texas
by Fritz Onion – Editor in Chief of Pluralsight

A Quick History of Client-Side Templating

Demo Link

JavaScript Micro-templating

In July 2008, Jon Resig posted a little, JavaScript micro-templating function.

jQuery Templates

In 2010, Boris Moore worked on a fork of John Resig‘s protoype, but in April 2011, jQuery Templates were put on hold.

Create the template inside of script tags and then inject it via the DOM wherever you want on the page.

JsRender and JsViews

by Boris Moore, carried ideas of jQuery Templates forward with the goal of separating into two components.

Read the rest of Client-Side Templating in jQuery at South by Southwest Interactive #SXSW2012

  • JsRender – small fast pure string-based rendering with no DOM dependency
  • JsViews – takes DOM content rendered by JsRender and activates it to provide equivalent DOM integration features to jQuery Templates and data linking

Killer App Design with Javascript and HTML 5

By 1 Comment

HTML5 and Complex Web Apps

Web 2.0 vs HTML5 apps

Web 2.0

  • Dynamic content
  • Database driven
  • Social applications
  • Stupid name
  • “The Internet is more than lame dancing genies and hit counters!”

HTML5 Apps

  • Interactive content
  • Real-time
  • Task-oriented
  • Cool logo
  • “You can have a desktop experience in your browser”
  • Not trying to replicate a desktop software experience.

HTML5 – New Markup (separating functionality and presentation in the DOM with data-* attributes)

Amazing JavaScript APIs

Application Architecture

Lots of tools available that will allow for a more robust application development process.

  • Moving state to the client
  • Wep app Kool-Aid: MVC/MVVM, pub/sub and the module pattern
  • Your application as an API

Don’t do it alone

Toolkits, precompilers, boilerplates, and more

For the enterprise-y among you

Testing, IDEs and other developer tools

Read the rest of Killer App Design with Javascript and HTML 5