A week at ZendCon 2010

Monday through Thursday what a ride. Yes I did miss some of the keynote speaker and yes I snagged a lunch which didnt belong to me. Sorry Sorry…ugh

Anyways ZendCon was awesome! I’m not sure why this event does not have more participants but I have to say that I greatly enjoyed it. Thumbs up to the organizers as well as the speakers. Ill be attending Zendcon until i drop dead.

Here are some key take aways from the conference.
1. Someone took Matthew Weier O’Phinney voice. He lost his voice, yet continued to participate in the talks. Pretty hardcore if you ask me.
2. If you’re not already looking at the cloud. Look up and try to spot one. No really, start reading up on it.
3. The Zend Framework 2.0 is being worked on and looks very promising in terms of performance.
4. The Zend Framework wants your feedback in terms of a Migration plan and bug hunts!
5. Zend Framework now has mobile support.
6. You MUST attend Zendcon 2011.

Reasons to attend Zendcon – Reason #1 – Networking
Does this sound familiar? “Meh, ill just read the Power Points when they are posted”. Yes that was me and it might be you. Though this is a good alternative, if you have no way to reach the con or cant come up with the $ to pay for it (btw ask your company if they can help you with this. Most companies do) I have to say that you’re missing out on a lot. The network of people you build while at the conference is great. You talk about lessons learned while tackling a specific problem and if the conversation attracts enough people youll find yourself huddled around a table chatting it up with 5 others with the same issue.

Reason #2 – Information Information information!!!!
The second reason to attend the conference is the ability to learn what other organizations are doing. I can not stress this enough. Being blind or not caring about the direction of your competitors or an industry leader in your field is tantemount to jumping out of a plane without a parachute (FAIL).

As a developer you want to know what company X is doing, how long they have tried this approach, and where its taken them. For all you know they failed and your team/company is close to implementing the same solution because it looks ‘attractive’…on paper. Zendcon provides this. I loved the open forum style talks. Each speaker shared their experiences from the field and allowed the audience to also share their experience. And yes I was typing away all these notes for my knowledge locker just in case i ever run into a similar situation.

Reason #3 – The Measuring stick doesnt lie
Finally the last and third reason I enjoy going to conferences and now enjoy going to this one. I like to measure where I’m at as an engineer. If you want to be good at what you do its not simply about building apps its about surrounding yourself with the people you want to be like. Learning from them, listen to what they are talking about, and listen to what they failed and succeed at. For me, the individual sitting on stage was a good reminder as to where I want to go. They encompassed the “do’ers” of the community in my book and with Matt it was more the breath of knowledge the guy has in his head. I kinda wanted to ask him what were the next steps to becoming a good developer and what he recommended someone in my area do to grow. But I chickened out. Next year.

All in all Zendcon a good conference to attend as a PHP developer and hope to see you there next year!

P.S. I will be posting my notes here shortly (this time for real. I know i promised slides from the Google I/O)

Google I/O 2010 – Day 1

Google I_O_Talk_Speed_TracerAttended my first Google I/O this year and truth be told I wasnt sure what to expect. My goal was to learn a bit more of Architecture, performance, and HTM 5. Looking back at day 1, I came away feeling good that I actually made it to the event given that I felt like just heading into work.

These are my notes for the first day. The below were the talks I chose to attend and created a quick PowerPoint Deck for a portalble version of the notes.

My Schedule:
1. Measure in milliseconds redux: Meet Speed Tracer [ My Notes: Powerpoint Deck Download ]
2. Beyond JavaScript: programming the web with native code
3. Architecting for performance with GWT
4. Developing With HTML5
5. GWT Linkers target HTML5 Web Workers, Chrome Extensions, and more

Stay tuned for tomorrows deck.

HTML5, Chrome, and WebDatabase.

I started to get the HTML5 itch a few weeks ago so I started to look around the web to feed my appetite for all things HTML 5. Turns out info is pretty hard to come by. Not sure when your reading this but its been tough to find adequate examples of what IS and what ISNT implemented yet since it all depends on the browser your using. Anyway. So im going to jot down my notes on using HTML5′s Web Database here by creating a few examples.

Quick Agenda
1. What is HTML 5.
2. What you need to get started.
3. The tool to view the DB
4. How to create AND connect to a DB.
5. How to create a table.
6. How to insert/update/delete records into a table.
7. How to list records in a table.

Let get the ball rollin’ now…buhahah

What is HTML 5.
HTML 5 is a collection of new tags, (list here) and along with the new tags it provides a tool set to store data on the user’s machine using javascript, yes Javascript (Web database API here).

What you need to get started.
For the example you’ll need at least Chrome 4. Of course you can use any browser you wish but YOU NEED TO BE SURE HTML 5 WEB DATABASE IS SUPPORTED.. I strongly recommend you download and install Google’s Chrome browser, so far it’s great. Click here for download link.

Thats all you need, oh! and you’ll need some HTML and Javascript know-how.

Figure 1.0 - Chrome Developer Tools

Load the web page your going to test on. In my case its http://localhost then click on the “Control Page” document icon on the far-top-right corner of your browser . Select Developer > Developer Tools. (Figure 1.0)

You should now see a window as shown in Figure 1.2 (minus the DB). If you do not see the information displayed on Figure 1.2 click on “Storage” on the top menu. The “Storage” window contains a nice little DATABASE list on the left along with other items specific to that page. At the moment there’s no databases so you wont see anything. This is just the place where you’ll be able to work with the DB

How to create AND connect to the DB
Let’s create a database. Our database will have the name, “test_database” and will be our initial 1.0 version. (Note: the database name is case sensitive)

dbObj = null;

function connectToDB(){
  dbObj = openDatabase('test_database', '1.0',
                                 'Test Database', 1024*1024*3);
}

connectToDB();

1. openDatabase(‘name of db’, ‘version’, ‘database description’, total bits table will use, call back function)

The callback function is used to create the table structure if present. In this example we’ll create the tables later. Also note that the size of the database is dependent on the amount of free space the user has available.

Figure 1.2 Developer Tool Database

Once you run the above javascript on your sandbox, pull up the Chrome Developer tool, you should now see the database (Figure 1.2)

How to create a table.
Were going to add a table. We’re going open a connection to the database again as shown in the first example and then use the SQLTransation object to execute a CREATE statement.

dbObj = null;

function connectToDB()
{
   dbObj = openDatabase('test_database', '1.0',
                                   'Test Database', 1024*1024*3);
}

connectToDB();

  //Create the table method
createTable = function()
{
   dbObj.transaction(function(SQLTransaction){
        SQLTransaction.executeSql(
        "CREATE TABLE userinfo (id INTEGER PRIMARY KEY, item1 TEXT)", [],
        function(){ alert('I am a successfull callback function!'); },
        function(){ alert('Oh no! I am a sad error callback function'); } );
      });
}

createTable();

Copy the above javascript, place into your file, and refresh the page. You will now have the table ‘userinfo’ in our database. If you want to add more tables simple call the method once more with a different CREATE statement. (Figure 1.3).

Some explaining…
SQLTransaction has 2 methods, transaction() (Read/Write) and readTransaction() (Read only). We use the transaction method when we need to read AND write. The readTransaction() has only ‘read only’ functionality and best used for SELECT SQL statements.

To execute the SQL statements we use the executeSql() method. A parameter explanation is shown below.

executeSql(‘SQL Statement’, [], success callback function, error callback function) . The [] contains values for each ? used within the SQL statement. “INSERT INTO userinfo (item1) VALUES (?)” will replace the ? with the the content to save for the specific column. It’s also recommended to use this feature to code against SQL Injection attacks. (quote)

How to insert/update/delete records into the DB
At this point UPDATE, INSERT, as well as DELETE statements use the same process as the previous example. We use the SQLTransaction.transaction() method as well as the executeSql() method.

The next example will insert a record into our database table, ‘userinfo’, and we’ll verify the data entered using the Chrome Developer tool. Please note that the below code assumes you already created the table.

dbObj = null;

function connectToDB()
{
   dbObj = openDatabase('test_database', '1.0',
				   'Test Database', 1024*1024*3);
}

connectToDB();

//Insert record into Table.
insertRecord = function(item1)
{
   dbObj.transaction(function(SQLTransaction){
      SQLTransaction.executeSql("INSERT INTO userinfo (item1) VALUES (?)", [item1],
   function(){ alert('Record saved!'); },
   function(){ alert('Uh Oh! record not save!'); } );

   });

}
var item1 = "your not funny dude..really your not.";
insertRecord(item1);

Figure 1.3 - Verifying our record was inserted.

How to List records
With data in our database, lets fetch the record we have in the table. To do so we use the read/write SQLTransaction method, readTransaction().

The following code assumes you have the database created, table created, and information stored in the table. If not go back and read the different sections.

dbObj = null;

function connectToDB()
{
   dbObj = openDatabase('test_database', '1.0',
				   'Test Database', 1024*1024*3);
}

connectToDB();

fetchRecords = function(){

   dbObj.readTransaction(function(SQLTransaction){
      SQLTransaction.executeSql('SELECT id, item1 FROM userinfo', [],
				function(SQLTransaction, data){
                                displayRecords(data); });
		});

}

displayRecords = function(data){

   var a = document.getElementById("text");
   a.innerText = data.rows.item(0).item1;

}

fetchRecords();

In this example we query the table and display the results of the call. We use the SQLTransaction readTransaction() method, SQLTransaction executeSql() method passing in the SQL statement and a call back function displayRecords(). If the SQL SELECT statement successfully ran we pass a SQLResultSet object, ‘data’, to the displayRecords() method. The displayRecords() method fetches the HTMLElement node, ‘text’ and sets the text for the node to be the record fetched item1 value.

Fetching a specific value for a row.
To fetch the record we use the SQLResultSet object’s ‘rows’ attribute which returns a SQLResultSetRowList object. We then use the ‘item()’ method to fetch a specific row in the row list. In this case we fetch the first row and call the objects class property, ‘item1′. Note that each column in the table is represented but a class property.

Conclusion
We covered all the basic features of the HTML 5 web database. Inserting, creating a table, connecting to a DB, and fetching records. Give it a shot, if you have any questions feel free to leave a comment or refer to the W3C page

Armando Padilla