Google Developer Day 2011: sections visited
This year, going up to the 4th floor, I noticed that the layout of the premises at Crocus Expo is changing as you please. On the ceiling there are runners where the walls are inserted as the organizers would like.
The main hall is now open, at registration they gave out red-blue glasses for viewing three-dimensional video. There was no schedule on the badge, but only a bar code to find it.
The post was very long, so you can read the headlines and focus on the sections of interest.
')
Next on Android, html5 and acceleration
The introductory section presented the site developers.google.com/go/stories
Considered the penetration of the Internet and mobile devices in our lives since 1990. Now every day more than 500 thousand android devices are activated. There are more than 4 billion phones in the world, of which 150 million work on Android, which are produced by 39 companies.
In February 2010, 60 thousand devices were activated daily, in January 2011 - 300 thousand, and in December 2011, 550 thousand activations are expected daily.
Over the 20 months of operation, the Android market had over 1 billion application installations, by July 2011 this number reached 6 billion and continues to grow. Currently, the Android Market contains 250 thousand applications.
Volumes and growth rates are amazing. This is good, but because of this, the requirements for mobile applications are growing, they should be more convenient, fast, beautiful and less demanding of resources.
The developers of the most popular paid on the android market of the application acted: Cut the Rope games. It's great that the most popular game is developed in Russia.
One of the tasks solved now is to connect the mobile and web world into one. The user should not feel the difference when changing platforms. Any website (web application) must have its own representation in a mobile environment.
At the moment, 67% of users use the browser with support for HTML5, and what is particularly pleasing: in Russia, this number has increased to 84%. So you can actively use modern features of HTML5.
Demonstrated what WebGl is capable of. With these technologies, you can implement very beautiful graphics on the web using canvas and javascript. Demonstrated applications with a pool with water, in which there was a ball, the waves, the shadows, the rotation of the pool look very nice. And all this on the web without using video and flash. Real-time rendering using GPU. There was also a demonstration of css-animation (Flux slider), we watched 2D asteroids, as implemented speech recognition in google translate (html5 tag - x-webkit-speech).
I really liked the new built-in feature in Chrome that can format javascript code from minified to readable. This button is called Pretty Print in the tools for developers, it looks like curly braces.
We also mentioned Web Audio Api, the WebM video format (/>) that allows you to view video in 3D.
After that I will send to Google+. The most important thing is circles. Well, of course, when all the relatives use it, then it is possible to organize communication very well, especially if everyone lives in different places, or is traveling. It is very convenient to organize video meetings using mobile devices and ordinary computers.
Google+ has turned 90 days and it has implemented more than 100 new chips. The Google+ Platform is already actively used: Google+ hosts the iframe, into which you can embed your applications, provides the API: developers.google.com/+
Of course not spared the button +1, which is used in search, in advertising, on sites. It is very interesting to see on the search results page which of your friends recommended the found site.
developer.android.com
The mentioned chips of the new version:
The system has very good compatibility with previous versions and it is built in such a way that the development would be as convenient as possible for tablets and mobile devices.
For example, if a mobile application uses several screens between which you need to make transitions, then for a tablet you can change the layout of these screens and they will be located side by side. As a result, the only difference is in the xml describing the presentation.
Now, in applications, you can purchase add-ons, thus eliminating the need to return to the market. Many foreign operators support the payment of applications directly from a mobile account, it is convenient that you do not need to tie a credit card to the market. Of course, in Russia this opportunity, if it does, will not be soon.
Some more buns:
Very interesting and powerful technology that should already be actively used in their applications.
Who, when and why may need offline access?
What and how to cache is described in the manifest:
CACHE:
specified url will always be cached
FALLBACK:
if the online version is not available, then take it from the cache
NETWORK:
always take from online, if here stands *, then everything that is not included in the previous rules is always taken from online
Detailed: appcachefacts.info
You can store non-structured data in the webStore, for which cookies are now used. For better performance, it is recommended to refuse cookies in favor of webStore. Structured data using IndexedDB and binary files.
To store data within the current session, until the user closes the browser, sessionStorage is used. To store data between sessions - localStorage, has methods: setItem (), getItem (), removeItem (), clear (). It is convenient to use the JSON.stringify () function to convert to a string and store json data.
For storing structured data, IndexedDB is used, which supports transactions. But for now this database is supported only in Chrome and Firefox.
Storage of binary files occurs in the file system: windows.requestFileSystem ()
It must be remembered that when using storage on the client side, it becomes necessary to synchronize data not only with the server, but also between open windows (SharedWorker).
In chrome, you can use the following addresses to view the current status of the repository:
chrome: // appcache-internals
chrome: // blob-internals
chrome: // quota-internals
You can learn about the support of these technologies by various browsers on the website caniuse.com and mobilehtml5.org
You can experiment with manifests here: appmator.appspot.com
An example of an application using these technologies: springpadit.com
Libraries for working with local repositories:
Very interesting report and presentation , I recommend it to see everything, open in Chrome. There is no sense to rewrite the presentation, but if it is short, then it deals with new features:
For animation, there is now a requestAnimationFrame , instead of setTimeout. The main differences:
Page Visibility API : now we know when the page is being viewed, and when the user has switched to another tab. This allows, for example, to pause the video while the page is not active. Example: www.samdutton.com/pageVisibility
Prerendering : you can tell the browser which page not only to load in advance, but also to render. Thus, when you go to the prerendering page, it will be displayed instantly! Demonstration: prerender-test.appspot.com
Navigator.onLine : now you can know whether there is currently an Internet connection. I use the special property navigator.onLine and take advantage of online and offline events on which you can hang your handlers. An example is in the presentation.
Web Intents : to reduce confusion in existing services. It works as follows: the service is registered as an event handler for certain types of events, the application reports its intention to perform an action, the user selects from the registered services which one he wants to use for this. Example: examples.webintents.org/intents/pick/index.html
Camera & microphone access : now you have access to a video camera and computer microphone.
Fullscreen content : any item can be displayed in full screen: bleedinghtml5.appspot.com/demos/fullscreen.html
WebRTC : using video and audio in real time in the browser without the help of third-party plug-ins and flash. All functions for suppressing echo, noise reduction, gain control browser takes over. This opens up many opportunities: video conferencing, audio calls directly on the site, building social networks of a new level, creating online presentations, online training and much more without the use of additional plug-ins. More info: www.webrtc.org
Web Audio API : now it’s not just a tag for playing music, but also real-time audio analysis, low-level manipulation, various audio effects.
But bad! Much of this is still in experimental mode, perhaps only available in Chrome. About the status of these developments: chromestatus.com .
Good news! To work html5 in backward browsers, you can use the chrome frame.
The profit from the site is proportional to its speed. The slower the site, the less people stay on it. Speed = Revenue.
Google has a great tool that analyzes the site, evaluate its speed and makes recommendations to speed it up: pagespeed.googlelabs.com
Recommendations include: adding a header for caching static on the client side, creating css sprites, merging and enabling css and javascript compression, postponing javascript analysis and much more.
For complex projects, all these actions are most likely better and more reliable to perform manually, especially if nginx, apache are used and there may be additional front-end servers that can additionally cache static.
And to automate the process of optimizing the site, google has released a module for apache mod_pagespeed, which implements many of the recommendations mentioned. It can also set caching time for a static image for a year, but if it is changed earlier, add a hash to the name of the image than it will cause them to be updated. Thus, at the same time, a large cache time is set, but it is also monitored for updates.
Beside the apache module, the online solution is now being tested: code.google.com/speed/pss . Google provides a front-end server through which users access your site, as a result, all traffic goes through Google, and it performs optimization, caches static and helps faster content delivery, because its servers are located around the world.
Also for testing there is a very convenient service www.webpagetest.org , it allows you to test the speed of the site from the point of view of the user from different points of the world using different browsers. Moreover, the service tests not only the initial load, but also repeated, taking into account the previously cached data.
That's all for now. Learn, accelerate, create. Thanks to everyone who read to the end.
I would welcome any comments and questions.
The main hall is now open, at registration they gave out red-blue glasses for viewing three-dimensional video. There was no schedule on the badge, but only a bar code to find it.
The post was very long, so you can read the headlines and focus on the sections of interest.
')
Next on Android, html5 and acceleration
Conference opening
The introductory section presented the site developers.google.com/go/stories
Considered the penetration of the Internet and mobile devices in our lives since 1990. Now every day more than 500 thousand android devices are activated. There are more than 4 billion phones in the world, of which 150 million work on Android, which are produced by 39 companies.
In February 2010, 60 thousand devices were activated daily, in January 2011 - 300 thousand, and in December 2011, 550 thousand activations are expected daily.
Over the 20 months of operation, the Android market had over 1 billion application installations, by July 2011 this number reached 6 billion and continues to grow. Currently, the Android Market contains 250 thousand applications.
Volumes and growth rates are amazing. This is good, but because of this, the requirements for mobile applications are growing, they should be more convenient, fast, beautiful and less demanding of resources.
The developers of the most popular paid on the android market of the application acted: Cut the Rope games. It's great that the most popular game is developed in Russia.
One of the tasks solved now is to connect the mobile and web world into one. The user should not feel the difference when changing platforms. Any website (web application) must have its own representation in a mobile environment.
At the moment, 67% of users use the browser with support for HTML5, and what is particularly pleasing: in Russia, this number has increased to 84%. So you can actively use modern features of HTML5.
Demonstrated what WebGl is capable of. With these technologies, you can implement very beautiful graphics on the web using canvas and javascript. Demonstrated applications with a pool with water, in which there was a ball, the waves, the shadows, the rotation of the pool look very nice. And all this on the web without using video and flash. Real-time rendering using GPU. There was also a demonstration of css-animation (Flux slider), we watched 2D asteroids, as implemented speech recognition in google translate (html5 tag - x-webkit-speech).
I really liked the new built-in feature in Chrome that can format javascript code from minified to readable. This button is called Pretty Print in the tools for developers, it looks like curly braces.
We also mentioned Web Audio Api, the WebM video format (/>) that allows you to view video in 3D.
After that I will send to Google+. The most important thing is circles. Well, of course, when all the relatives use it, then it is possible to organize communication very well, especially if everyone lives in different places, or is traveling. It is very convenient to organize video meetings using mobile devices and ordinary computers.
Google+ has turned 90 days and it has implemented more than 100 new chips. The Google+ Platform is already actively used: Google+ hosts the iframe, into which you can embed your applications, provides the API: developers.google.com/+
Of course not spared the button +1, which is used in search, in advertising, on sites. It is very interesting to see on the search results page which of your friends recommended the found site.
What's new and important in Android
developer.android.com
The mentioned chips of the new version:
- shooting video in 3D, the presenter shot the hall and in the 3D glasses you could watch the result on the screen
- This system works well on various tablets and on mobile phones.
- possibility of simultaneous scrolling of several areas
- Action Bar will be on tablets and mobile phones
The system has very good compatibility with previous versions and it is built in such a way that the development would be as convenient as possible for tablets and mobile devices.
For example, if a mobile application uses several screens between which you need to make transitions, then for a tablet you can change the layout of these screens and they will be located side by side. As a result, the only difference is in the xml describing the presentation.
Now, in applications, you can purchase add-ons, thus eliminating the need to return to the market. Many foreign operators support the payment of applications directly from a mobile account, it is convenient that you do not need to tie a credit card to the market. Of course, in Russia this opportunity, if it does, will not be soon.
Some more buns:
- The ability to enable hardware acceleration of applications: <application android: hardwareAccelerate = "true">, but, so far, this option may not always lead to the desired effect, so it should be tested in specific applications.
- Separation of views depending on the size of the devices. In this case, the elements can be made dependent on the screen resolution, so that the buttons do not turn out very small with very high resolution and small screen size
- USB host
- Open Accessory API
- API compatible for phones and tablets
Offline HTML 5
Very interesting and powerful technology that should already be actively used in their applications.
Who, when and why may need offline access?
- on the plane, traveling, in the desert, under water)
- if a bad connection: you are driving in a tunnel, in the subway
- best performance
- for creating client applications
What and how to cache is described in the manifest:
CACHE:
specified url will always be cached
FALLBACK:
if the online version is not available, then take it from the cache
NETWORK:
always take from online, if here stands *, then everything that is not included in the previous rules is always taken from online
Detailed: appcachefacts.info
- To develop and test a user cache, it will be convenient:
- disable http caching
- In the manifest, specify the version number, so that if one tsiferki change, all the data will be taken new. Moreover, the data will be updated only when re-loading. That is, at the first boot, the manifest will be updated, and at the second, the data will be updated
- to log, in chrome, some events are logged
You can store non-structured data in the webStore, for which cookies are now used. For better performance, it is recommended to refuse cookies in favor of webStore. Structured data using IndexedDB and binary files.
To store data within the current session, until the user closes the browser, sessionStorage is used. To store data between sessions - localStorage, has methods: setItem (), getItem (), removeItem (), clear (). It is convenient to use the JSON.stringify () function to convert to a string and store json data.
For storing structured data, IndexedDB is used, which supports transactions. But for now this database is supported only in Chrome and Firefox.
Storage of binary files occurs in the file system: windows.requestFileSystem ()
It must be remembered that when using storage on the client side, it becomes necessary to synchronize data not only with the server, but also between open windows (SharedWorker).
In chrome, you can use the following addresses to view the current status of the repository:
chrome: // appcache-internals
chrome: // blob-internals
chrome: // quota-internals
You can learn about the support of these technologies by various browsers on the website caniuse.com and mobilehtml5.org
You can experiment with manifests here: appmator.appspot.com
An example of an application using these technologies: springpadit.com
Libraries for working with local repositories:
- storage polyfill
- sessionstorage
- lawnchair
HTML5 ahead of the rest
Very interesting report and presentation , I recommend it to see everything, open in Chrome. There is no sense to rewrite the presentation, but if it is short, then it deals with new features:
For animation, there is now a requestAnimationFrame , instead of setTimeout. The main differences:
- the animation is played only if it is currently visible, so no extra resources are spent,
- The playback speed is 60 frames per second, as well as the frequency of most monitors, again there is no extra work on generating frames that still do not have time to be displayed.
Page Visibility API : now we know when the page is being viewed, and when the user has switched to another tab. This allows, for example, to pause the video while the page is not active. Example: www.samdutton.com/pageVisibility
Prerendering : you can tell the browser which page not only to load in advance, but also to render. Thus, when you go to the prerendering page, it will be displayed instantly! Demonstration: prerender-test.appspot.com
Navigator.onLine : now you can know whether there is currently an Internet connection. I use the special property navigator.onLine and take advantage of online and offline events on which you can hang your handlers. An example is in the presentation.
Web Intents : to reduce confusion in existing services. It works as follows: the service is registered as an event handler for certain types of events, the application reports its intention to perform an action, the user selects from the registered services which one he wants to use for this. Example: examples.webintents.org/intents/pick/index.html
Camera & microphone access : now you have access to a video camera and computer microphone.
Fullscreen content : any item can be displayed in full screen: bleedinghtml5.appspot.com/demos/fullscreen.html
WebRTC : using video and audio in real time in the browser without the help of third-party plug-ins and flash. All functions for suppressing echo, noise reduction, gain control browser takes over. This opens up many opportunities: video conferencing, audio calls directly on the site, building social networks of a new level, creating online presentations, online training and much more without the use of additional plug-ins. More info: www.webrtc.org
Web Audio API : now it’s not just a tag for playing music, but also real-time audio analysis, low-level manipulation, various audio effects.
But bad! Much of this is still in experimental mode, perhaps only available in Chrome. About the status of these developments: chromestatus.com .
Good news! To work html5 in backward browsers, you can use the chrome frame.
Making your site faster
The profit from the site is proportional to its speed. The slower the site, the less people stay on it. Speed = Revenue.
Google has a great tool that analyzes the site, evaluate its speed and makes recommendations to speed it up: pagespeed.googlelabs.com
Recommendations include: adding a header for caching static on the client side, creating css sprites, merging and enabling css and javascript compression, postponing javascript analysis and much more.
For complex projects, all these actions are most likely better and more reliable to perform manually, especially if nginx, apache are used and there may be additional front-end servers that can additionally cache static.
And to automate the process of optimizing the site, google has released a module for apache mod_pagespeed, which implements many of the recommendations mentioned. It can also set caching time for a static image for a year, but if it is changed earlier, add a hash to the name of the image than it will cause them to be updated. Thus, at the same time, a large cache time is set, but it is also monitored for updates.
Beside the apache module, the online solution is now being tested: code.google.com/speed/pss . Google provides a front-end server through which users access your site, as a result, all traffic goes through Google, and it performs optimization, caches static and helps faster content delivery, because its servers are located around the world.
Also for testing there is a very convenient service www.webpagetest.org , it allows you to test the speed of the site from the point of view of the user from different points of the world using different browsers. Moreover, the service tests not only the initial load, but also repeated, taking into account the previously cached data.
That's all for now. Learn, accelerate, create. Thanks to everyone who read to the end.
I would welcome any comments and questions.
Source: https://habr.com/ru/post/130122/
All Articles