It was the first meeting of GDG Haifa at the technion. I gave the first talk about HTML5 (new) APIs that front-end developers should leverage. It was a good kick-off event and it seems that this group will produce many more quality events. You can check the demos and the slide at my project site.
When we thinking on web apps and specially mobile web apps, we wish to make them smooth a responsive as possiable. The main problem is latency/network and luckily we have enough APIs in HTML5 to make sure we can achieve this goal. A good recent example is fastbook (yep… just like facebook but working FAST with HTML5). Here I’ll summaries some of the main points you wish to pay attention when you building your next amazing mobile web app. Start with ‘offline first’ (after all, you are on the right path with ‘mobile first’ already).
- You should store all the main assets of your application. There are several APIs you can use:
- AppCache – for the main index.html page and all your JS, CSS code. You could also use it for images and other static data.
- Filesystem – You have an option to work with files: text and binary data. This is a great option for cases where you have a lot of images/mp3/videos etc’. In order to manage the work with files there is a great library – filer.js
- Storing state/data:
Let’s start with some cool features you should use in Chrome DevTools:
- Device emulation – You can set a new User Agent so your web app will think you are now access it from a mobile phone/tablet etc’. This is a great feature that used to be something you needed to use a Chrome extension in order to have.
- Dimension overriding - This is very cool because it let developers debug mobile web apps on different devices and operating systems via the Settings Menu. You can emulate the exact device metrics of many devices (e.g. iPad/iPhone, Galaxy Nexus/Tablets and even BB) so your media queries will run without any bugs.
- Touch event emulation to make it easier to debug mobile applications on the desktop. Of course, you can have other simulators (e.g. Android and iOS) but here you have it inside Chrome!
- If you wish to play with the latest and greatest features that are under ‘experiments’. You should go to: chrome://flags/ and click ‘Enable’ on: ‘Enable Developer Tools experiments’ then in the setting panels of the devtools you will have more granular control on the specific feature you wish to use. For more checkout the official page of chrome developer tools.
You can watch the 10min episode on our GDL-IL page.
As you all know, last week we had the launch of the new Chromebook for everyone. I’m really existed about this new device because it’s a combination of cheaper (249$ on amazon), better (lots of improvements + important security capabilities), faster (well, lighter). Some of the interesting specs are:
- 11.6’’ screen
- 0.7 inches / 2.42 pounds
- 6.5 hours of battery (I had it running for more then 8h – but maybe, it because I was working mostly with email/docs and cloud 9 and not watching movies).
- Boots up in less than 10 seconds
- 100 GB of Google Drive free for 2 years – Yep, 100G.
You can test the water with it on several locations in the US (e.g Best Buy) and ‘feel’ it. I can say that in the past months I’ve worked with a very close model and it was a great device. If you ‘live’ in the cloud and do not need photoshop (like 99% of the internet users) it might be a device you want to checkout. As web developers, if you are using a cloud IDE (e.g. like one from this list) It might be very good option.
The Chromebook for everyone
Compare the new device to his ‘older’ brother
I had an urge to do the same video but then I’m notice this one… so here you go. It’s cover the major differences in terms of the hardware. As for the OS and the new features in Chrome… It’s the same (of course).
In the last Java Posse Roundup (=the best unconference you can attend) we had many very interesting meetings. In this one hour conversation we were talking about
Since we had no-snow and free time, we did few ‘rolling’ hackathons in the afternoons. You can browse the coding projects on GitHub JavaPosseRoundup. Checkout, some cool Scala, Android, HTML5 apps that are there. Lastly, I also gave a talk about this topic before the conference at a Google developer meetup. Here are the “Modern Web Apps slides from my talk that contain more good information about the subject.
I had my talk on: HTML5 and App Engine: The Epic Tag Team Take on Modern Web Apps at Scale which was focusing on the latest and greatest application patterns and toolset for building cutting edge HTML5 applications that are backed by App Engine. This talk was focusing on an app that spans client and server (beer in our amazing example); We showed few nice features like OAuth2.0 that just works out of the box. In a nutshell, our talk aims to show you how to build a fantastic cloud-based HTML5 application with Goole App Engine. Both Brad Abrams and I will share another post with more details on the topics we covered. If you want to play with the ‘test-page’ and see what we manage to built in 45min go and check my github repository at: https://github.com/greenido/backbone-bira It’s far from being finished (the sync layer will be there in the next few weeks) and the app could get better, so feel free to fork it and improve it.
Some notes (not very polish at this stage – sorry) that I took during the day:
Google Drive – with its new SDK you can do much more for your users. In chromeOS it’s the ‘native’ file system and it will sync everything (that you need) to your local SSD. Modern Web apps are now very powerful and we see a wave of organizations that are now ‘going google’. Leading universities, enterprise and 400M ‘regular’ users are using Gmail (Docs, Cal and other products). We had Gmail offline (which working very nice on my long flights) and from today, Google docs are now working offline and soon both sheets and presentations.
Let you run huge amounts of servers inside VMs (all linux based). Why it’s good?
- Scale – It’s scaling to amounts that seems to be unreal. Imagen 7.5B hits per day on Google app engine…
- Performance – You can count on certain time for performance.
- Value – it’s much cheaper then other providers.
A demo of 600,000 core running live is very COOL – Lots of developers in the keynote were amazed to see it. The demo was to show a use case of helping human genom company run calculations in seconds and not minutes. This specific example, took 10min on 1000 cores and in the demo you saw new connections made in seconds (1-2 seconds instead of 10min on an infrastructure that would cost thousands of dollars.
USB, game-pad and audio API are now allowing us to have amazing games on the web.
HTML5 demo on Cirque du Soleil - using WebRTC to get the user image and let her control the experiance. Very cool CSS3 transitions and amazing graphics. Chrome got 310M users… It’s growing fast ‘up and to the right’. In the end of the day, we all get a better web because more developers want to use the new HTML5 features that are there.
I hope to update this very soon with the videos from my talk and the slides.
I’ve took some notes during this packed day. I apologize if they are not ‘polish’… The main goal is to put them here asap and later (maybe, on my next 26h flight) work on them and make sure the wording is better.
Keynote take aways
- Android – Nexus 7 looks like a great tablet. It’s in the right size and with many great apps that will shin on it. I hope to check it out soon specially as a reading device.
- Nexus Q seems like powerful (and beautiful) computer that make music/video more social. The use cases are powerful and the ability to stream google music with a push of a button in your friends place – cool!
- Google+ got event – finally we have a powerful mobile app that let you and your friends share photos together before/during/after events. I know several startups that are trying to solve this challenge and it’s going to be interesting to see what will happend in this space of geo-local-photo sharing apps.
- Glass – Jumping from airplanes, bikes and some snapling on Moscone. What can I say? I want the roll Sergay is having these days… This video tell the story:
Web component Talk
- Shadow Dom – encapsulate stuff in the DOM.
You can follow on it using Chrome DevTools (go to setting and click on ‘show Shadow Dom’) in the example of a video tag you will see all the ‘shadows’ that are behind the sense (e.g. some divs, buttons etc’)
It’s important to rememeber that for every DOM element we can have Shadow DOM rendered instead. We have here a rendering time structure which can help developer write more efficient web apps that runs faster and smoother.
- Custom element – meaningful tas to extend DOM objects.
Use the new HTML5 < element >
- Templates – clonable DOM for easy authoring
In Parctice we try to ‘tell’ the browser what we mean. The declarative renaissance with web component will let developer to channel their intent to the web browser. It is giving developer CSS variables to custom components and define an api that other developers can leverage. It will let the community a way to share semantics and overtime we will see HTML envlolve due to popular use cases (e.g. x-poll tag).
Another important point is that declerative tags will run faster because the browser ‘understand’ them nativly.
Google Drive API
- On ChromeOS you have today a strong integration with web applications like: Lucid Charts and Aviray. Both apps, are doing great job in their UI to use the user massel memory and make her productive asap. On the backend, they use google drive api to save your work.
- You should use the google JS library and load the picker (in their drive example) and use it. It’s very easy and nice api to use.
- Security – level of access (or scope). These level of access were very board… (scery) but now they have a new api (per file). Once you approve it (using OAuth2.0) the app will be able to access certain files.
Other great talks that I’ll fill in the details later are:
The web is changing so quickly that it’s hard to keep up with what’s new in the platform. HTML5′s new capabilities allow developers to build a whole new suite of applications – things that were once impossible to do, are now a reality.
This session cover some of the bleeding edge of HTML5:
- media capture
- HTML5 file APIs
- Advanced usage of web sockets
- Media streaming.
- Device input
- CSS3 & multimedia.
- Modern CSS design.
Building a solid webapp is a challenge for all developers, but a plethora of tools have emerged recently to assist you. From starting boilerplates, to performance tuning and build tools, you’ll get a full overview of the tooling ecosystem. In this session, you’ll learn which mature and valuable open source projects can save you time as well as get answers to common questions in building a webapp.