Frontend London, one day edition, namely EpicFEL. 30 minutes about Performance and Optimization with Google AppEngine and AngularJS, with 2 case studies developed for Google Creative Lab London and Red Bull Music Academy / Google+ London
The Modern Java Web Developer Bootcamp - Devoxx 2013Matt Raible
HTML5, CSS3, JavaScript, jQuery, Angular JS, Bootstrap, Mobile, CoffeeScript, GitHub, functional programming, Page Speed, Apache, JSON with Jackson, caching, REST, Security, load testing, profiling, Wro4j, Heroku, Cloudbees, AWS.
These are just some of the buzzwords that a Java web developer hears on a daily basis. This talk is designed to expose you to a plethora of technologies that you might've heard about, but haven't learned yet. We'll concentrate on the most important web developer skills, as well as UI tips and tricks to make you a better front-end engineer. Some of the most valuable engineers these days have front-end JS/CSS skills, as well as backend Java skills.
This presentation is from the University session I delivered at Devoxx 2013, in Antwerp. http://devoxx.be/dv13-matt-raible.html?presId=3648
This document discusses techniques for building hybrid web applications using PJAX and HATEOAS. PJAX uses AJAX and the History API to update parts of pages for a fluid user experience while retaining server-side rendering. Event delegation and element lifetime are important concepts for managing views. HATEOAS decouples clients from servers by having servers provide link URLs rather than clients hardcoding them. Animation and respecting the back button are also discussed. Staying in sync between the client and server by giving components URLs and using server-sent events is covered.
Create responsive websites with Django, REST and AngularJSHannes Hapke
The document discusses 10 steps to make a Django site more responsive by adding a REST API and using AngularJS for the front-end: 1) Create an API endpoint for the Django models, 2) Set up the JavaScript environment and install AngularJS, 3) Create a static AngularJS site, 4) Use verbatim tags to avoid conflicts between Django and AngularJS variables, 5) Connect AngularJS to the API, 6) Take advantage of the Django REST Framework features, 7) Handle asynchronous data loading, 8) Add forms and POST requests, 9) Clean up settings.py, and 10) Document the API. The goal is to keep the back-end lightweight Django while building a more responsive and
The document discusses ways to automate and improve a front-end development workflow. It recommends using tools like Grunt, Bower, Yeoman, and generators to automate repetitive tasks like linting, compiling assets, running tests, and deploying code. These tools can help reduce boilerplate code and improve productivity. It also suggests configuring the development environment with tools like Sublime Text, Chrome DevTools, and simulators/emulators to enhance debugging and cross-device testing. The overall message is that automating workflows and choosing the right tools allows developers to work more efficiently and focus on creative work.
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Rich Web Experie...Matt Raible
Building a modern web (or mobile) application requires a lot of tools, frameworks and techniques. This session shows how JHipster unites popular frameworks like AngularJS, Spring Boot and Bootstrap. Using Yeoman, a scaffolding tool for modern webapps, JHipster will generate a project for you and allow you to use Java 7 or 8, SQL or NoSQL databases, Spring profiles, Maven or Gradle, Grunt or Gulp.js, WebSockets and BrowserSync. It also supports a number of different authentication mechanisms: classic session-based auth, OAuth 2.0, or token-based authentication.
For cloud deployments, JHipster includes out-of-the-box support for Cloud Foundry, Heroku and Openshift.
This document provides an outline and overview of a Google App Engine course presented by the National Center for High-Performance Computing. It introduces Google App Engine, outlines the prerequisites for getting started, demonstrates a simple "Hello World" App Engine application, and describes key concepts like the MVC pattern, templates, and using the Google Datastore for application data storage.
Javascript done right - Open Web Camp IIIDirk Ginader
The document discusses what makes for "good" JavaScript from a developer perspective. It argues that good JavaScript should be understandable, reusable, extensible, optimized, secure, internationalized, optional, and accessible. It provides examples and recommendations for each of these qualities, such as using clear naming and documentation to improve understandability, writing code in a modular and structured way to improve reusability, and using frameworks to avoid reinventing patterns. It also discusses performance optimizations like reducing DOM reflows and different techniques for modifying the DOM efficiently.
Comprehensive Browser Automation Solution using Groovy, WebDriver & Obect ModelvodQA
Learn how to design, create, maintain, and re-factor an automation framework using the power of WebDriver, the elegance of jQuery content selection, the robustness of Page Object modeling, and the expressiveness of the Groovy language. Gaurav introduces an open-source testing solution that provides all this, and can be integrated with testing frameworks such as Spock, JUnit & TestNG.
The Modern Java Web Developer Bootcamp - Devoxx 2013Matt Raible
HTML5, CSS3, JavaScript, jQuery, Angular JS, Bootstrap, Mobile, CoffeeScript, GitHub, functional programming, Page Speed, Apache, JSON with Jackson, caching, REST, Security, load testing, profiling, Wro4j, Heroku, Cloudbees, AWS.
These are just some of the buzzwords that a Java web developer hears on a daily basis. This talk is designed to expose you to a plethora of technologies that you might've heard about, but haven't learned yet. We'll concentrate on the most important web developer skills, as well as UI tips and tricks to make you a better front-end engineer. Some of the most valuable engineers these days have front-end JS/CSS skills, as well as backend Java skills.
This presentation is from the University session I delivered at Devoxx 2013, in Antwerp. http://devoxx.be/dv13-matt-raible.html?presId=3648
This document discusses techniques for building hybrid web applications using PJAX and HATEOAS. PJAX uses AJAX and the History API to update parts of pages for a fluid user experience while retaining server-side rendering. Event delegation and element lifetime are important concepts for managing views. HATEOAS decouples clients from servers by having servers provide link URLs rather than clients hardcoding them. Animation and respecting the back button are also discussed. Staying in sync between the client and server by giving components URLs and using server-sent events is covered.
Create responsive websites with Django, REST and AngularJSHannes Hapke
The document discusses 10 steps to make a Django site more responsive by adding a REST API and using AngularJS for the front-end: 1) Create an API endpoint for the Django models, 2) Set up the JavaScript environment and install AngularJS, 3) Create a static AngularJS site, 4) Use verbatim tags to avoid conflicts between Django and AngularJS variables, 5) Connect AngularJS to the API, 6) Take advantage of the Django REST Framework features, 7) Handle asynchronous data loading, 8) Add forms and POST requests, 9) Clean up settings.py, and 10) Document the API. The goal is to keep the back-end lightweight Django while building a more responsive and
The document discusses ways to automate and improve a front-end development workflow. It recommends using tools like Grunt, Bower, Yeoman, and generators to automate repetitive tasks like linting, compiling assets, running tests, and deploying code. These tools can help reduce boilerplate code and improve productivity. It also suggests configuring the development environment with tools like Sublime Text, Chrome DevTools, and simulators/emulators to enhance debugging and cross-device testing. The overall message is that automating workflows and choosing the right tools allows developers to work more efficiently and focus on creative work.
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Rich Web Experie...Matt Raible
Building a modern web (or mobile) application requires a lot of tools, frameworks and techniques. This session shows how JHipster unites popular frameworks like AngularJS, Spring Boot and Bootstrap. Using Yeoman, a scaffolding tool for modern webapps, JHipster will generate a project for you and allow you to use Java 7 or 8, SQL or NoSQL databases, Spring profiles, Maven or Gradle, Grunt or Gulp.js, WebSockets and BrowserSync. It also supports a number of different authentication mechanisms: classic session-based auth, OAuth 2.0, or token-based authentication.
For cloud deployments, JHipster includes out-of-the-box support for Cloud Foundry, Heroku and Openshift.
This document provides an outline and overview of a Google App Engine course presented by the National Center for High-Performance Computing. It introduces Google App Engine, outlines the prerequisites for getting started, demonstrates a simple "Hello World" App Engine application, and describes key concepts like the MVC pattern, templates, and using the Google Datastore for application data storage.
Javascript done right - Open Web Camp IIIDirk Ginader
The document discusses what makes for "good" JavaScript from a developer perspective. It argues that good JavaScript should be understandable, reusable, extensible, optimized, secure, internationalized, optional, and accessible. It provides examples and recommendations for each of these qualities, such as using clear naming and documentation to improve understandability, writing code in a modular and structured way to improve reusability, and using frameworks to avoid reinventing patterns. It also discusses performance optimizations like reducing DOM reflows and different techniques for modifying the DOM efficiently.
Comprehensive Browser Automation Solution using Groovy, WebDriver & Obect ModelvodQA
Learn how to design, create, maintain, and re-factor an automation framework using the power of WebDriver, the elegance of jQuery content selection, the robustness of Page Object modeling, and the expressiveness of the Groovy language. Gaurav introduces an open-source testing solution that provides all this, and can be integrated with testing frameworks such as Spock, JUnit & TestNG.
How Google AppEngine deals with digital art? how about music? a few case studies developed by Stinkdigital with Google Creative Lab and how App Engine dealt with a considerable amount of visits
This document introduces and summarizes Django, an open-source web framework written in Python. It highlights key features of Django, including its automated administration interface, object-relational mapper (ORM), generic views, forms, URL configuration, templates, internationalization support, and built-in user authentication. The document also discusses how Django aims to minimize the time it takes to develop software through automation, reusable apps, and other features. Examples are provided of large sites built with Django to demonstrate its performance and scalability.
Testing Angular 2 Applications - Rich Web 2016Matt Raible
The best reason for writing tests is to automate your testing. Without tests, you'll likely be testing manually. This manual testing will take longer and longer as your codebase grows.
In this session, you’ll learn how to test an Angular 2 application. You'll learn how to use Jasmine to unit test components and Protractor for integration testing. We’ll also take a look at code coverage options and explore continuous integration tools.
This document contains information from a presentation on testing Angular applications. It discusses various testing strategies like unit testing, end-to-end testing, and continuous integration/deployment. It also covers tools like Angular CLI, TypeScript, setting up tests, mocking dependencies. Examples of unit testing Angular services and components are provided. Resources like style guides, books, and the presenter's contact details are listed at the end.
This document provides an introduction and overview of single page applications (SPAs) using AngularJS as an example framework. It discusses what SPAs are and why they are used, including how they allow a more native-like user experience. It then walks through setting up a sample SPA project for managing todo lists and categories using AngularJS, including creating routes, controllers, services and templates to support basic CRUD operations. The goal is to help understand the key concepts and setup needed to build a basic SPA.
From Idea to App (or “How we roll at Small Town Heroes”)Bramus Van Damme
Guestlecture I gave to the students ICT at Odisee, explaining the app development process, how we do certain things at Small Town Heroes, and how we implement QA throughout our process.
AngularJS is a framework for building dynamic web applications. It uses HTML as the template language and allows you to extend HTML's syntax to express your application's components clearly and succinctly. AngularJS's data binding and dependency injection allows it to connect data and logic to the DOM and update the DOM when data changes. The core aspects of AngularJS covered in the document include directives, modules, scopes, controllers, templates and data binding. Key points are that directives attach behavior to DOM elements, modules allow partitioning of an app into logical blocks, scopes provide separation of model and view, and controllers extend scopes to handle logic and expose properties.
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...Matt Raible
JavaScript MVC Frameworks are all the rage these days. They’ve taken the web development world by storm. This session explores the various features of the three hottest JavaScript MVC frameworks: AngularJS, Ember.js and React.js. It also compares client-side templating vs. server-side templating and how well each framework supports Isomorphic JavaScript (code that can run both client-side and server-side). Finally, it ranks each framework on 10 different criteria using Yevgeniy Brikman’s framework scorecard.
Video on InfoQ: https://www.infoq.com/presentations/comparing-angular-ember-react
JBUG 11 - Django-The Web Framework For Perfectionists With DeadlinesTikal Knowledge
The document discusses Django, an open-source web framework for Python. It highlights how Django can shorten development time for web applications by automating common tasks. It provides examples of how Django handles data modeling, views, templates, and other features out of the box. The document also lists many successful websites built with Django that demonstrate its performance, scalability, and popularity in the developer community.
Deep crawl the chaotic landscape of JavaScript Onely
The document discusses the challenges of indexing JavaScript-powered websites by search engines. It notes that JavaScript rendering takes significant computational resources, straining crawlers' budgets. It also suggests that client-side rendered JavaScript websites have difficulties with search engine indexing and ranking, as content may be missed during Google's two-wave indexing process for JavaScript. The document recommends using server-side rendering, hybrid rendering, or prerendering to help search engines properly index JavaScript websites.
Introduction to Angular JS by SolTech's Technical Architect, Carlos Muentes.
To learn more about SolTech's custom software and recruiting solution services, visit http://www.soltech.net.
This document provides instructions for integrating AngularJS into an existing legacy HTML application. It describes how to add an Angular "micro-app" by specifying a container div with Angular directives like ng-app and ng-controller. The Angular code, including a module, controller, and function calls from the legacy code, can be kept separate. Template views can also be added using ng-view and routing configuration. The process is described as relatively simple and allowing incremental integration of Angular without rewriting the entire application.
This document provides an overview of AngularJS, including what it is, why it is useful, how it compares to Backbone, and how to get started using it. AngularJS is an open-source MVC framework for building single-page applications. It helps organize JavaScript code and build responsive websites. While smaller than Backbone, AngularJS provides better data binding and template support. The document outlines the basics of AngularJS directives, modules, expressions, controllers, models, filters, creating directives, services, and unit testing. It also discusses tools like Karma, Jasmine, Bower, Yeoman, and Angular Mock that can be used with AngularJS.
The document provides an overview and introduction to AngularJS. It discusses key Angular concepts like data binding, directives, filters, controllers and scopes. It also covers using Angular for client-side routing and communicating with servers to retrieve data. Example code snippets are provided to demonstrate concepts like controllers, directives and routing. Labs and exercises are included to apply the concepts by building sample Angular applications.
Brief introduction of Google App Engine and Play Framework.
Step-by-step instruction to develop and deploy play! web App on GAE with Siena persistence layer, CRUD management interface and login support.
How I learned to stop worrying and love embedding JavaScriptKevin Read
Embed your Javascript code in your native mobile app for fun and profit. We showcase our approach to embed Canvas-heavy interactive JS code within our iOS and Android app.
AngularJS is a JavaScript framework that uses MVC architecture and directives to extend HTML. Directives allow behaviors and transformations to DOM elements. Common directives include ng-app to define the root element, ng-controller for application logic, ng-model for two-way data binding, and ng-repeat for listing elements. AngularJS makes applications faster, more interactive and testable through features like data binding, dependency injection and reusable components.
How Google AppEngine deals with digital art? how about music? a few case studies developed by Stinkdigital with Google Creative Lab and how App Engine dealt with a considerable amount of visits
This document introduces and summarizes Django, an open-source web framework written in Python. It highlights key features of Django, including its automated administration interface, object-relational mapper (ORM), generic views, forms, URL configuration, templates, internationalization support, and built-in user authentication. The document also discusses how Django aims to minimize the time it takes to develop software through automation, reusable apps, and other features. Examples are provided of large sites built with Django to demonstrate its performance and scalability.
Testing Angular 2 Applications - Rich Web 2016Matt Raible
The best reason for writing tests is to automate your testing. Without tests, you'll likely be testing manually. This manual testing will take longer and longer as your codebase grows.
In this session, you’ll learn how to test an Angular 2 application. You'll learn how to use Jasmine to unit test components and Protractor for integration testing. We’ll also take a look at code coverage options and explore continuous integration tools.
This document contains information from a presentation on testing Angular applications. It discusses various testing strategies like unit testing, end-to-end testing, and continuous integration/deployment. It also covers tools like Angular CLI, TypeScript, setting up tests, mocking dependencies. Examples of unit testing Angular services and components are provided. Resources like style guides, books, and the presenter's contact details are listed at the end.
This document provides an introduction and overview of single page applications (SPAs) using AngularJS as an example framework. It discusses what SPAs are and why they are used, including how they allow a more native-like user experience. It then walks through setting up a sample SPA project for managing todo lists and categories using AngularJS, including creating routes, controllers, services and templates to support basic CRUD operations. The goal is to help understand the key concepts and setup needed to build a basic SPA.
From Idea to App (or “How we roll at Small Town Heroes”)Bramus Van Damme
Guestlecture I gave to the students ICT at Odisee, explaining the app development process, how we do certain things at Small Town Heroes, and how we implement QA throughout our process.
AngularJS is a framework for building dynamic web applications. It uses HTML as the template language and allows you to extend HTML's syntax to express your application's components clearly and succinctly. AngularJS's data binding and dependency injection allows it to connect data and logic to the DOM and update the DOM when data changes. The core aspects of AngularJS covered in the document include directives, modules, scopes, controllers, templates and data binding. Key points are that directives attach behavior to DOM elements, modules allow partitioning of an app into logical blocks, scopes provide separation of model and view, and controllers extend scopes to handle logic and expose properties.
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...Matt Raible
JavaScript MVC Frameworks are all the rage these days. They’ve taken the web development world by storm. This session explores the various features of the three hottest JavaScript MVC frameworks: AngularJS, Ember.js and React.js. It also compares client-side templating vs. server-side templating and how well each framework supports Isomorphic JavaScript (code that can run both client-side and server-side). Finally, it ranks each framework on 10 different criteria using Yevgeniy Brikman’s framework scorecard.
Video on InfoQ: https://www.infoq.com/presentations/comparing-angular-ember-react
JBUG 11 - Django-The Web Framework For Perfectionists With DeadlinesTikal Knowledge
The document discusses Django, an open-source web framework for Python. It highlights how Django can shorten development time for web applications by automating common tasks. It provides examples of how Django handles data modeling, views, templates, and other features out of the box. The document also lists many successful websites built with Django that demonstrate its performance, scalability, and popularity in the developer community.
Deep crawl the chaotic landscape of JavaScript Onely
The document discusses the challenges of indexing JavaScript-powered websites by search engines. It notes that JavaScript rendering takes significant computational resources, straining crawlers' budgets. It also suggests that client-side rendered JavaScript websites have difficulties with search engine indexing and ranking, as content may be missed during Google's two-wave indexing process for JavaScript. The document recommends using server-side rendering, hybrid rendering, or prerendering to help search engines properly index JavaScript websites.
Introduction to Angular JS by SolTech's Technical Architect, Carlos Muentes.
To learn more about SolTech's custom software and recruiting solution services, visit http://www.soltech.net.
This document provides instructions for integrating AngularJS into an existing legacy HTML application. It describes how to add an Angular "micro-app" by specifying a container div with Angular directives like ng-app and ng-controller. The Angular code, including a module, controller, and function calls from the legacy code, can be kept separate. Template views can also be added using ng-view and routing configuration. The process is described as relatively simple and allowing incremental integration of Angular without rewriting the entire application.
This document provides an overview of AngularJS, including what it is, why it is useful, how it compares to Backbone, and how to get started using it. AngularJS is an open-source MVC framework for building single-page applications. It helps organize JavaScript code and build responsive websites. While smaller than Backbone, AngularJS provides better data binding and template support. The document outlines the basics of AngularJS directives, modules, expressions, controllers, models, filters, creating directives, services, and unit testing. It also discusses tools like Karma, Jasmine, Bower, Yeoman, and Angular Mock that can be used with AngularJS.
The document provides an overview and introduction to AngularJS. It discusses key Angular concepts like data binding, directives, filters, controllers and scopes. It also covers using Angular for client-side routing and communicating with servers to retrieve data. Example code snippets are provided to demonstrate concepts like controllers, directives and routing. Labs and exercises are included to apply the concepts by building sample Angular applications.
Brief introduction of Google App Engine and Play Framework.
Step-by-step instruction to develop and deploy play! web App on GAE with Siena persistence layer, CRUD management interface and login support.
How I learned to stop worrying and love embedding JavaScriptKevin Read
Embed your Javascript code in your native mobile app for fun and profit. We showcase our approach to embed Canvas-heavy interactive JS code within our iOS and Android app.
AngularJS is a JavaScript framework that uses MVC architecture and directives to extend HTML. Directives allow behaviors and transformations to DOM elements. Common directives include ng-app to define the root element, ng-controller for application logic, ng-model for two-way data binding, and ng-repeat for listing elements. AngularJS makes applications faster, more interactive and testable through features like data binding, dependency injection and reusable components.
Discover the benefits of outsourcing SEO to Indiadavidjhones387
"Discover the benefits of outsourcing SEO to India! From cost-effective services and expert professionals to round-the-clock work advantages, learn how your business can achieve digital success with Indian SEO solutions.
Ready to Unlock the Power of Blockchain!Toptal Tech
Imagine a world where data flows freely, yet remains secure. A world where trust is built into the fabric of every transaction. This is the promise of blockchain, a revolutionary technology poised to reshape our digital landscape.
Toptal Tech is at the forefront of this innovation, connecting you with the brightest minds in blockchain development. Together, we can unlock the potential of this transformative technology, building a future of transparency, security, and endless possibilities.
HijackLoader Evolution: Interactive Process HollowingDonato Onofri
CrowdStrike researchers have identified a HijackLoader (aka IDAT Loader) sample that employs sophisticated evasion techniques to enhance the complexity of the threat. HijackLoader, an increasingly popular tool among adversaries for deploying additional payloads and tooling, continues to evolve as its developers experiment and enhance its capabilities.
In their analysis of a recent HijackLoader sample, CrowdStrike researchers discovered new techniques designed to increase the defense evasion capabilities of the loader. The malware developer used a standard process hollowing technique coupled with an additional trigger that was activated by the parent process writing to a pipe. This new approach, called "Interactive Process Hollowing", has the potential to make defense evasion stealthier.
Performance and Optmization - a technical talk at Frontend London
1. Performance + Optimization
Thomas Alisi, Solution Architect
@grudelsud @stinkdigital
EpicFEL Oct2014, Sadler’s Wells, London
photo courtesy of https://www.flickr.com/photos/8064990@N08/
2. Stinkdigital is an interactive production company,
working with clients and advertising agencies
worldwide.
!
Our services include creative concepting, design
and high-end execution. We create everything from
live-action films and websites, through to mobile
apps and installations.
See our 2013 showreel
3. Project Google Title
+ The Barbican
BDreavnadrt
Body A new platform creative text coders goes here.
from Google and the Barbican that aims to reward and inspire
everywhere.
VIEW SITE
4. Revolutions in Sound
Red Bull
We teamed up with Google+ & Red Bull Music Academy to create a living
archive of UK club culture.
VIEW SITE
ABOUT THE TECHNOLOGY
10. OK, now try and guess the last one 252,000,000
= 31.5M’’ x 8y [number of seconds in 8 years]
11. but also… 252,000,000
= 36M x 7’’ [7 seconds saved for each of the 36M visits
we had during the first 6 months on DevArt]
12. How did we do it?
1. Google App Engine (GAE) and AngularJS
2. data structures
3. views optimisations
4. image management
5. load testing
6. GAE benchmarking tool and task inspector
7. GAE asynchronous API
13. 1. Google App Engine (GAE) and AngularJS
2. data structures
3. views optimisations
4. image management
5. load testing
6. GAE benchmarking tool and task inspector
7. GAE asynchronous API
14. - Grunt, Gulp, Browserify, Webpack… AAARGH!
! - we like vanilla JS and have been fan of Gulp
(at least over the past 10 minutes…)
! - we (I) tend to use a super simple Gulp-Browserify-
AngularJS boilerplate
https://github.com/grudelsud/angularjs-gulp-browserify-boilerplate
! - but there are other good examples too
e.g. https://github.com/unit9/coffee-bone
!
!
divide et impera
15. - GAE is not opinionated (which is good)
! - don’t use Django on GAE unless you really want to
(e.g. use legacy modules or deploy something really
quick)
! - Flask is OK and does not have preferences for a specific
ORM (which is great)
! - webapp2 is really super simple (a bit too simple…)
22. 1. Google App Engine (GAE) and AngularJS
2. data structures
3. views optimisations
4. image management
5. load testing
6. GAE benchmarking tool and task inspector
7. GAE asynchronous API
23.
24. - Frontend caching: most of the API requests are fired when
initialising the view
! - Only request data that will be used/visible
! - Remove the tap delay on mobile
! - Request images in the size they will be actually displayed
! - Rendering optimizations, be aware of DOM structure and
calls to RenderObject https://speakerdeck.com/
jaffathecake/rendering-without-lumps
! - Create a custom font with all icons used (glyphs) https://
icomoon.io/
25. 1. Google App Engine (GAE) and AngularJS
2. data structures
3. views optimisations
4. image management
5. load testing
6. GAE benchmarking tool and task inspector
7. GAE asynchronous API
26. The get_serving_url() method allows you to generate a stable,
dedicated URL for serving web-suitable image thumbnails.
!
You simply store a single copy of your original image in Blobstore,
and then request a high-performance per-image URL.
[https://cloud.google.com/appengine/docs/python/images/]
!
ex.
!
// Resize the image to 32 pixels (aspect-ratio preserved)
http://your_app_id.appspot.com/randomStringImageId=s32
!
// Crop the image to 32 pixels
http://your_app_id.appspot.com/randomStringImageId=s32-c
28. 1. Google App Engine (GAE) and AngularJS
2. data structures
3. views optimisations
4. image management
5. load testing
6. GAE benchmarking tool and task inspector
7. GAE asynchronous API
29. GAE docs are rubbish! :) i.e. read it, then forget it:
https://cloud.google.com/appengine/articles/load_test
!
3rd party services are OK, but run your own if you can
!
create a meaningful simulation of users’ behaviour
!
hit it as hard as you can, but don’t forget your wallet!
31. - approximately 5000 concurrent user hitting the backend
API with a "casual navigation" simulation from different
location (London, New York, AWS data centre in Ireland)
! - 85 running instances (class F2) at peak
! - no errors reported other than random https sockets
timeout
! - average response times - < 2s for gallery content navigation - < 1s for singe project page navitation - < 3s for static contend (loaded just once)
32. 1. Google App Engine (GAE) and AngularJS
2. data structures
3. views optimisations
4. image management
5. load testing
6. GAE benchmarking tool and task inspector
7. GAE asynchronous API
33.
34.
35.
36.
37.
38. 1. Google App Engine (GAE) and AngularJS
2. data structures
3. views optimisations
4. image management
5. load testing
6. GAE benchmarking tool and task inspector
7. GAE asynchronous API
39. get_serving_url_async
@classmethod
def fix_dict(cls, dict, async=False):
!
async_blobs = []
!
def _fix_dict(k, v):
!
# blob
if isinstance(v, blobstore.BlobKey):
try:
# create futures and put them apart, we'll resolve these later
output = {'key': str(v), 'url': '', 'rpc': images.get_serving_url_async(v, secure_url=True)}
async_blobs.append(output)
return output
except BaseException as e:
# logging.warn('error while fetching serving url for [%s] maybe using corrupted image?' % (v,))
return None
!
for k, v in dict.iteritems():
dict[k] = _fix_dict(k, v)
!
if async is True:
return dict, async_blobs
else:
cls.resolve_future_blobs(async_blobs)
return dict
!
@classmethod
def resolve_future_blobs(cls, async_blobs):
# resolve futures
for blob in async_blobs:
try:
blob['url'] = blob['rpc'].get_result()
except BaseException:
blob['url'] = ''
del(blob['rpc'])
1. get async url
2. resolve future blobs
3. get real url
40. Thanks!
uh, just two notes:
!
1. we are hiring! send us your CV - careers@stinkdigital.com
2. we organise a Meetup with UNIT9 and B-Reel, get in touch!
tomalisi@stinkdigital.com