This document summarizes Jan Jongboom's presentation on building web applications for offline use. Some key points:
1. Only 2.5 billion people out of 7 billion have internet access, so mobile users often don't have a connection. Applications need to work offline.
2. Applications have two parts - the shell (code, UI, assets) and app content (dynamic data). The shell can be cached using the AppCache API to work offline.
3. App content is fetched via AJAX but can be stored in localStorage to serve offline. Path caching pre-fetches related data to improve performance.
4. While AppCache works today, the ServiceWorker API proposed by Google
Building a Single Page Application using Ember.js ... for fun and profitBen Limmer
Denver Startup Week 2015 Talk. The talk is split into two sections: conceptual reasons you might choose a framework like EmberJS where convention over configuration is preferred, and a live coding demo where we build a simple EmberJS application for our up-and-coming business, Bluth's Banana Stand.
Your visitors interact with content, not with your website. Content consistency is crucial to a successful user experience. Re-publishing is one option but it’s an inside-out action that relies on the authority controlling where the information goes. An API frees your data and the responsibility to where it is published and accessed. Mobile is a major consumer for your API but not every API is setup to handle the mass of requests coming from those devices. Learn how to mobile devices consume API’s with limited or low bandwidth and how to to tailor your API to be as efficient and effective as possible.
http://environmentsforhumans.com/2012/doteduguru-summit/
The next web will be about flow, this flow will be user generated pipelines through applications and services. Unlike before these Pipelines will be definable, non-proprietary and shareable by anyone
Building a Single Page Application using Ember.js ... for fun and profitBen Limmer
Denver Startup Week 2015 Talk. The talk is split into two sections: conceptual reasons you might choose a framework like EmberJS where convention over configuration is preferred, and a live coding demo where we build a simple EmberJS application for our up-and-coming business, Bluth's Banana Stand.
Your visitors interact with content, not with your website. Content consistency is crucial to a successful user experience. Re-publishing is one option but it’s an inside-out action that relies on the authority controlling where the information goes. An API frees your data and the responsibility to where it is published and accessed. Mobile is a major consumer for your API but not every API is setup to handle the mass of requests coming from those devices. Learn how to mobile devices consume API’s with limited or low bandwidth and how to to tailor your API to be as efficient and effective as possible.
http://environmentsforhumans.com/2012/doteduguru-summit/
The next web will be about flow, this flow will be user generated pipelines through applications and services. Unlike before these Pipelines will be definable, non-proprietary and shareable by anyone
Talk delivered in New York, Sep 19, 2016 during an O'Reilly meetup before Velocity Conference about Web Performance and Images, including HTTP Client Hints and new Image Formats
With third party clients connecting to your service you may find that the assumptions or opinions of a typical rails application are not robust enough. We'll run through some key considerations when building an API that will be consumed by a mobile app.
UPDATE: This slide deck is superseded by http://www.slideshare.net/samsalisbury/mesos-at-opentable-talk-20151111
From talk I did at the London Mesos user group, October 23rd 014.
Migrating existing monolith to serverless in 8 stepsYan Cui
Refactoring a monolith to serverless can be intimidating, but there are discrete steps that you can take to simplify the process. In this talk, AWS Serverless Hero Yan Cui outlines 8 steps to successfully refactor your monolith and highlight key decision points such as language and tooling choices.
Teaming up WordPress API with Backbone.js in TitaniumJeroen van Dijk
WordPress is an absolutely powerful platform to publish content, but up till now it lacked the ability to publish and read content using a proper restful API. That is about to change. The new WP-API plugin is slated to be part of the WordPress core creating an easy access layer from a decoupled frontend.
And a mobile app is of course such a decoupled frontend!
This talk will show you how to leverage the power of the WordPress API to build an app in Appcelerator Titanium which uses Backbone.js as it's way of syncing. We'll go through the WP API basics, custom post types, proper API logic and offline strategies for your first app. Connecting the dots into Backbone.js is then a piece of cake!
HTML5 or Android for Mobile Development?Reto Meier
Android apps or the mobile web? It's often a hard choice when deciding where to invest your mobile development resources. While the mobile web continues to grow, apps and app stores are incredibly popular. We will present both perspectives and offer some suggestions for making the most of each platform.
Explore internals of Angular.js. Understand the design principles of Angular and how those same ideas can be extended to write testable and maintainable Angular code.
Looking in from the outside, serverless seems so simple! And yet, many companies are struggling on their journey to serverless. In this webinar, AWS Serverless Hero Yan Cui highlights a number of common mistakes companies are making when they adopt serverless so you can avoid them.
Progressive Web Apps - Overview & Getting StartedGaurav Behere
A brief intro to progressive web apps & conventional ways of performance optimization on web.
The presentation was given as part of a tech talk, thus the readers are suggested to read through the reference links as well.
Talk delivered in New York, Sep 19, 2016 during an O'Reilly meetup before Velocity Conference about Web Performance and Images, including HTTP Client Hints and new Image Formats
With third party clients connecting to your service you may find that the assumptions or opinions of a typical rails application are not robust enough. We'll run through some key considerations when building an API that will be consumed by a mobile app.
UPDATE: This slide deck is superseded by http://www.slideshare.net/samsalisbury/mesos-at-opentable-talk-20151111
From talk I did at the London Mesos user group, October 23rd 014.
Migrating existing monolith to serverless in 8 stepsYan Cui
Refactoring a monolith to serverless can be intimidating, but there are discrete steps that you can take to simplify the process. In this talk, AWS Serverless Hero Yan Cui outlines 8 steps to successfully refactor your monolith and highlight key decision points such as language and tooling choices.
Teaming up WordPress API with Backbone.js in TitaniumJeroen van Dijk
WordPress is an absolutely powerful platform to publish content, but up till now it lacked the ability to publish and read content using a proper restful API. That is about to change. The new WP-API plugin is slated to be part of the WordPress core creating an easy access layer from a decoupled frontend.
And a mobile app is of course such a decoupled frontend!
This talk will show you how to leverage the power of the WordPress API to build an app in Appcelerator Titanium which uses Backbone.js as it's way of syncing. We'll go through the WP API basics, custom post types, proper API logic and offline strategies for your first app. Connecting the dots into Backbone.js is then a piece of cake!
HTML5 or Android for Mobile Development?Reto Meier
Android apps or the mobile web? It's often a hard choice when deciding where to invest your mobile development resources. While the mobile web continues to grow, apps and app stores are incredibly popular. We will present both perspectives and offer some suggestions for making the most of each platform.
Explore internals of Angular.js. Understand the design principles of Angular and how those same ideas can be extended to write testable and maintainable Angular code.
Looking in from the outside, serverless seems so simple! And yet, many companies are struggling on their journey to serverless. In this webinar, AWS Serverless Hero Yan Cui highlights a number of common mistakes companies are making when they adopt serverless so you can avoid them.
Progressive Web Apps - Overview & Getting StartedGaurav Behere
A brief intro to progressive web apps & conventional ways of performance optimization on web.
The presentation was given as part of a tech talk, thus the readers are suggested to read through the reference links as well.
Session slides from Future Insights Live, Vegas 2015:
https://futureinsightslive.com/las-vegas-2015/
Modular front-end applications that can grow and evolve over time. Many front-end JS toolkits are optimized for building the first version of the app quickly. But for an app that powers a business, you have to think past initial launch. Your app will likely outlive the attention span of those who first wrote it. So, how do we pick tools and architectures that can be modified, maintained, and upgraded over time by a team of people?
A progressive web app (PWA) delivers an app-like experience through your mobile phone’s browser but has the same flexibility and gestures as a native application. Because they are powered by mobile browsers, they are not particular to any one device, meaning developers no longer need to write separate code for Android and Apple devices.
Slides from a talk our iOS Product Manager, Nadav Wizman, gave at Advanced iOS Engineering event at The Junction (@thejunction32).
Read the blog post: http://blog.onavo.com/?p=443
VelocityConf EU 2013 - Turbocharge your mobile web apps by using offline Jan Jongboom
Presentation I gave on November 14, 2013 during VelocityConf EU 2013. Offline is awesome. Overview of packaged apps, appcache, service workers, caching AJAX requests, two-way data syncing, etc.
The Ember.js Framework - Everything You Need To KnowAll Things Open
All Things Open 2014 - Day 2
Thursday, October 23rd, 2014
Yehuda Katz
Founder of Tilde
Front Dev 1
The Ember.js Framework - Everything You Need To Know
Progressive Web Applications - The Next Gen Web TechnologiesGeekNightHyderabad
In a world where majority of the population is not actively connected to the Internet, how usable are the regular web applications? What are the technologies which would help us develop apps to include all these users? To answer this need and also to bring about a great user experience, we have Progressive Web Applications (PWAs) emerging.
The talk would cover what gaps in the traditional web apps and native apps led to the emergence of PWAs. What are PWAs and the underlying technologies for making a web app progressive. It also covers what are the challenges involved in developing PWAs.
Dreamweaver CS6, jQuery, PhoneGap, mobile designDee Sadler
A session talk for #NAGW2012 on:
Mobile app, choices
Dreamweaver’s place
Creating Mobile Design (actual design, not code)
Other helpful Adobe tools to create HTML/CSS
jQuery Mobile in DW
PhoneGap Build in DW
Антон Киршанов - «Квант изменения. Реактивные реакции на React.FDConf
Современные интерактивные приложения в вебе требуют особого внимания к работе с непрерывно изменяющимися, динамическими данными. RxJS – библиотека, построенная на паттерне Observable/Observer, выражает последовательность изменений в состоянии приложения через внешние потоки данных и предоставляет широкий набор средств для создания, фильтрации, комбинирования таких потоков удобным для разработчика способом. Для наглядной демонстрации преимуществ такого подхода в докладе будут рассмотрены некоторые примеры с использованием библиотеки React, они помогут осознать основные принципы связывания потоков данных и представления, а также увидеть гибкость, компактность и практическую ценность предлагаемого библиотекой RxJS метода.
Насколько сложно создать виртуальный тур и добавить на сайт? Я расскажу как сделать это за 5 минут, мы добавим его на веб страницу, откроем в мобильном браузере и запустим в очках виртуальной реальности. Разберёмся как всё устроено, рассмотрим библиотеку THREE.js и технологию WebGL.
Илья Климов - Reason: маргиналы против хайпаFDConf
ClojureScript, Elm, PureScript, CoffeeScript, Dart, Kotlin. Этот список языков, так или иначе транспилирующихся в JavaScript можно продолжать бесконечно. В своем докладе я расскажу о Reason - еще одной попытке, в этот раз от Facebook?влиться в это движение. Или все же нет? В докладе я сфокусируюсь не столько на том, как Reason крут, сколько на том, какую ценность он составляет для JavaScript разрабочика, кому он нужен и свой реальный опыт практического использования.
Максим Щепелин - Доставляя веб-контент в игруFDConf
За 7 лет развития World of Tanks, сложность игрового клиента и сервера значительно выросла. Если сервер можно разделить на сервисы, то клиент остается огромным монолитом в миллионы строк кода на ActionScript, C++ и Python.
Мы решили проблему сложности, встаиванием браузера в игровой клиент и заменив частично на нативные интерфесы на веб-контент. О преимуществах и недостатках этого подхода я расскажу в своём докладе.
Radoslav Stankov - Handling GraphQL with React and ApolloFDConf
For almost an year I'm was working on GraphQL projects. In the talk, I'm going to share my experiences working with GraphQL with React and Apollo. I would cover the following talk points:
what is GraphQL
why are people so excited about GraphQL
how to use GraphQL with React
how to solve common problems with GraphQL
Виктор Русакович - Выборы, выборы, все фреймворки… приторныFDConf
Пять лет назад присоединился к команде разработки проекта, над которым до сих пор идёт работа. За это время приложения, создаваемые в рамках проекта, использовали разные фреймворки - от jQuery до React, от Backbone до Angular.
Как мы выбираем фреймворк для нашего следующего приложения? Какой фреймворк самый лучший? Как выбрать фреймворк и через год разочароваться в своём выборе? Короткая история о выборах в одном длинном проекте.
Slobodan Stojanovic - 8 1/2 things about serverless FDConf
What is serverless? How does it work? Can you explain it with something as simple as Lego bricks?
This talk will answer that and at least five and a half more questions. It’s main goal is to explain serverless architecture, show you why it’s important, and finally, show you why it works great with Node.js and how to use it.
PWA – это сейчас хайп тренд. Google и Microsoft говорят про них на своих конференциях. Twitter и Uber переписывают на них свои мобильные версии веб-приложений. И вот, работая над своим проектом, я решил сделать его Progressive и протестировать на реальных пользователях в production. В этом докладе я расскажу как я это делал и какую пользу это принесло проекту.
Страница должна загружаться быстрее чем 1 секунда; количество серверных запросов должно быть сведено к минимуму; CSS и JS файлы должны быть сжаты и не превышать 50 килобайт…” Это лишь малая часть технических решений и рекомендаций, которыми нас снабжает индустрия в погоне за производительностью. Но во всем этом есть одна проблема – пользователям нет никакого дела до килобайтов, миллисекунд и количества запросов. Производительность – это не математика. Производительность — это восприятие. Именно восприятие может создает впечатление медлительности сайта с малым количеством серверных запросов, в то время как сайт, возвращающий результаты поиска в течение секунд, может восприниматься как достаточно быстрый для пользователя. И именно восприятие пользователя является единственным мерилом производительности вашего сайта.
В докладе будут рассмотрены психологические и технические теории, приемы и примеры, позволяющие управлять восприятием пользователя
Полная версия презентации по ссылке: http://goo.gl/1iBNNO
... ничего такого не произойдет :) Их сложно начать писать, нужно мотивировать команду, а самое главное — непонятно, зачем? Ведь можно открыть браузер и в пару кликов проверить все ли в порядке с приложением.
Доклад о том, как много мы теряем, если не пишем тесты. Я покажу, с чего начать, какие инструменты и методики можно использовать. Поделюсь собственным опытом разработки JavaScript тестов. Постараюсь показать, как тесты смогут сделать ваш проект лучше.
Migrate your React.js application from (m)Observable to ReduxFDConf
Вся презентация по ссылке: goo.gl/FySndO
0) Intro about our Content Browser project architecture.
1) Problem with current state in Fluxx world.
2) Observable pattern like temporal decision.
3) Complexity and Pay off.
4) Redux is not panacea but it is the best what we have.
6) Migration tricks or how to reduce the pain.
7) Conclusion.
Вся презентация по ссылке: goo.gl/WuwMZL
Если ваш проект перевалил за миллион строк кода, а количество разработчиков за десяток - то вам уже пришлось столкнутся с проблемами JS и его масштабируемости. В данном докладе будет рассказано о том, как решить эти проблемы, как начать использовать Dart, послойно встраивая его в устаревший код и как растить команду с помощью типизированного языка.
Modern web applications have constantly growing requirements and their complexity grows exponentially. Some of the biggest challenges in front of us are state management, testability, flexibility and on top of that we need to develop the application at reasonable level of simplicity in order to ease the recruitment process.
In this presentation I'll introduce a scalable Angular 2 application architecture, which answers the following requirements:
- Testability.
- Predictable state management.
- Scalable communication layer.
- Modular and robust design
JavaScript является одни из самых популярных языков программирования. На сегодняшний день его можно использовать не только в браузере, но и на сервере, в системах управления баз данных, программировать микроконтроллеры, писать десктопные и мобильные приложения. В данном докладе я расскажу о современном JavaScript и его областях применения (Mongo, CouchDB, Node, Meteor, tessel, PhoneGap, ReactNative и так далее), а также загляну немного в будущее и покажу вам куда он движется (ES2015, ES2016 ... ESxxxx, WebAssembly). И много-много всего интересного с демками)
CSSO – инструмент для минификации CSS, который недавно вернулся к активной разработке. Зачем?
Дело в том, что минификация CSS – задача сложная. Сейчас нет идеального минификатора, и чтобы эффективным был и делал все правильно. Ведь нужно учитывать не только особенности CSS, который постоянно меняется, но и уровень его поддержки браузерами, их баги, префиксы, хаки и т.д. Все это требует решения ряда непростых задач. Поговорим об этом, а так же принципах работы CSS-минификаторов, новых идеях и развитии CSSO.
Подробнее: http://www.slideshare.net/basisjs/csso-compress-css-english-version
Redux - негласный победитель Flux соревнований, одна из трендовых библиотек 2015 года. Слишком "сырой" для продакшена? Нет, мы так не думаем! Используя силу функционального подхода и модель Event Sourcing'a, Redux позволяет гибко управлять состоянием вашего приложения. В докладе мы расскажем про то, как мы, используя связку Redux+React, переписали с нуля front-end одного из наших продуктов (Лидсканер | leadscanner.ru). Рассмотрим реальные плюсы и минусы данного стека, в частности: работу с side-effects, повторное использование компонентов, тестируемость.
Структура:
Про нас.
Какие перед нами стояли вызовы.
Многоуровневая архитектура.
Обзор Flux архитектуры.
Redux - Predictable state container for JavaScript apps.
React как view layer.
Повторное использование компонентов.
Dumb and Smart components.
Feature Folders.
Работа с side effects.
Обзор подходов организации actionCreators.
Middlewares.
Redux-saga.
Минусы данного стека.
Каждый день появляется по новому JavaScript фрeймворку или новой технологии. И каждый день мы задаемся вопросом, как за всем этим успеть? Константин даст Вам серебряную пулю. Вы будете знать, как быстро разобраться в React, PostCss, RxJS, Redux, CycleJs, Angular и даже в неизвестном супер фреймворке. Увидим, что стоит за трендами технологий 2016.
Подробнее: https://mavrin.github.io/pres-be-first/#1
"Service Worker: Let Your Web App Feel Like a Native "FDConf
Nowadays web apps become inseparable part of our everyday life. But even playing such a big role they still don’t have a lot of advantages the native ones have. Service Worker is designed to break down these barriers. Installing and updating your app, fully controlling the network cache, intercepting network responses, sending push notifications and doing backgrounds updates. All these becomes possible with Service Worker. Is your web app ready to rock?
Generating a custom Ruby SDK for your web service or Rails API using Smithyg2nightmarescribd
Have you ever wanted a Ruby client API to communicate with your web service? Smithy is a protocol-agnostic language for defining services and SDKs. Smithy Ruby is an implementation of Smithy that generates a Ruby SDK using a Smithy model. In this talk, we will explore Smithy and Smithy Ruby to learn how to generate custom feature-rich SDKs that can communicate with any web service, such as a Rails JSON API.
Essentials of Automations: Optimizing FME Workflows with ParametersSafe Software
Are you looking to streamline your workflows and boost your projects’ efficiency? Do you find yourself searching for ways to add flexibility and control over your FME workflows? If so, you’re in the right place.
Join us for an insightful dive into the world of FME parameters, a critical element in optimizing workflow efficiency. This webinar marks the beginning of our three-part “Essentials of Automation” series. This first webinar is designed to equip you with the knowledge and skills to utilize parameters effectively: enhancing the flexibility, maintainability, and user control of your FME projects.
Here’s what you’ll gain:
- Essentials of FME Parameters: Understand the pivotal role of parameters, including Reader/Writer, Transformer, User, and FME Flow categories. Discover how they are the key to unlocking automation and optimization within your workflows.
- Practical Applications in FME Form: Delve into key user parameter types including choice, connections, and file URLs. Allow users to control how a workflow runs, making your workflows more reusable. Learn to import values and deliver the best user experience for your workflows while enhancing accuracy.
- Optimization Strategies in FME Flow: Explore the creation and strategic deployment of parameters in FME Flow, including the use of deployment and geometry parameters, to maximize workflow efficiency.
- Pro Tips for Success: Gain insights on parameterizing connections and leveraging new features like Conditional Visibility for clarity and simplicity.
We’ll wrap up with a glimpse into future webinars, followed by a Q&A session to address your specific questions surrounding this topic.
Don’t miss this opportunity to elevate your FME expertise and drive your projects to new heights of efficiency.
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
DevOps and Testing slides at DASA ConnectKari Kakkonen
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Jeffrey Haguewood
Sidekick Solutions uses Bonterra Impact Management (fka Social Solutions Apricot) and automation solutions to integrate data for business workflows.
We believe integration and automation are essential to user experience and the promise of efficient work through technology. Automation is the critical ingredient to realizing that full vision. We develop integration products and services for Bonterra Case Management software to support the deployment of automations for a variety of use cases.
This video focuses on the notifications, alerts, and approval requests using Slack for Bonterra Impact Management. The solutions covered in this webinar can also be deployed for Microsoft Teams.
Interested in deploying notification automations for Bonterra Impact Management? Contact us at sales@sidekicksolutionsllc.com to discuss next steps.
Securing your Kubernetes cluster_ a step-by-step guide to success !KatiaHIMEUR1
Today, after several years of existence, an extremely active community and an ultra-dynamic ecosystem, Kubernetes has established itself as the de facto standard in container orchestration. Thanks to a wide range of managed services, it has never been so easy to set up a ready-to-use Kubernetes cluster.
However, this ease of use means that the subject of security in Kubernetes is often left for later, or even neglected. This exposes companies to significant risks.
In this talk, I'll show you step-by-step how to secure your Kubernetes cluster for greater peace of mind and reliability.
Accelerate your Kubernetes clusters with Varnish CachingThijs Feryn
A presentation about the usage and availability of Varnish on Kubernetes. This talk explores the capabilities of Varnish caching and shows how to use the Varnish Helm chart to deploy it to Kubernetes.
This presentation was delivered at K8SUG Singapore. See https://feryn.eu/presentations/accelerate-your-kubernetes-clusters-with-varnish-caching-k8sug-singapore-28-2024 for more details.
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
Keynote at DIGIT West Expo, Glasgow on 29 May 2024.
Cheryl Hung, ochery.com
Sr Director, Infrastructure Ecosystem, Arm.
The key trends across hardware, cloud and open-source; exploring how these areas are likely to mature and develop over the short and long-term, and then considering how organisations can position themselves to adapt and thrive.
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Albert Hoitingh
In this session I delve into the encryption technology used in Microsoft 365 and Microsoft Purview. Including the concepts of Customer Key and Double Key Encryption.
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
11. Currency converter BYR -> EUR. Price of a beer.
- It’s a website. Resources are on a server.
- Data comes from Yahoo
12. Currency converter BYR -> EUR. Price of a beer.
- It’s a website. Resources are on a server.
- Data comes from Yahoo
13. Currency converter BYR -> EUR. Price of a beer.
- It’s a website. Resources are on a server.
- Data comes from Yahoo
14. When no internet connection -> breaks. Oh noes. We want to fix it.
15. The shell
App content
Let me introduce some basic concepts here. An application consists of two parts:
1. The shell
2. App Content
16. The shell
• All assets
• Distribution through:
• App store
• Publish on web server
• Changes are costly
The shell are all assets that make up your application. Code files, the user interface, images. It's the
part that you would distribute through an app store, or the application that you put up on a web
server. The shell hardly changes, and if you want to make a change it's a costly one. You would need to
re-release your product.
17. The shell
• All assets
• Distribution through:
• App store
• Publish on web server
• Changes are costly
The shell are all assets that make up your application. Code files, the user interface, images. It's the
part that you would distribute through an app store, or the application that you put up on a web
server. The shell hardly changes, and if you want to make a change it's a costly one. You would need to
re-release your product.
18. App content
• Everything your app serves
up
• Pushed down from server
• Highly volatile
• Changes are cheap
The app content is everything your app serves up. News items; the facebook feed. Most of the times
it's pushed down to the client via HTTP requests, it's generally short lived and very cheap to update.
Ergo: We need to distinguish between these two types is because they require different caching
strategies and techniques, but you can't make an application available without either of these two.
19. App content
• Everything your app serves
up
• Pushed down from server
• Highly volatile
• Changes are cheap
The app content is everything your app serves up. News items; the facebook feed. Most of the times
it's pushed down to the client via HTTP requests, it's generally short lived and very cheap to update.
Ergo: We need to distinguish between these two types is because they require different caching
strategies and techniques, but you can't make an application available without either of these two.
20. Part I: The shell
So we have a website, it has HTML/CSS/JS and now we want to cache it. There is a technique called
appcache. Already in all major browsers, even IE. So you can use it today.
21. List all !les, put them in cache
Basically, list all files & put them in the cache.
23. AppCache
First request
Grabbing jan.com/index.html
Please cache all these !les manifest.appcache
On first request it looks like this. Browser fetches your HTML page. If it has appcache, it fetches that
file and loads all resources. No initial performance penalty.
24. AppCache
2nd request
I need foo/blah
Browser Cache
Second request, if the requested file is already in appcache? OK! No waiting time anymore. If not, go to
server.
25. AppCache
2nd request
I need foo/blah
Browser Cache
Second request, if the requested file is already in appcache? OK! No waiting time anymore. If not, go to
server.
26. AppCache
2nd request
I need foo/blah
200 OK! Browser Cache
Second request, if the requested file is already in appcache? OK! No waiting time anymore. If not, go to
server.
32. currency.appcache
JavaScript !le
Browser will ALWAYS show cached version. Updates go by updating the version number in the
manifest. Downloads in background.
Javascript APIs available, downloading/progress/noupdate.
33. Inspecting AppCache (FF)
Tools > Developer > Developer Toolbar
appcache list localhost
Dealing with appcache info, to debug
37. Shit you will do wrong
• Setting wrong MIME type
• Have one !le 404
• Not realizing user will always see
old version !rst
• Expiration headers on appcache
• Develop with appcache enabled
(tip: set wrong MIME type in dev)
Some stuff you will do wrong
38. Performance
Also useful for performance. Because no need to hit the server. This is data from a web application I
built. Pretty simple.
39. 1500 ms
Empty cache
On my home internet connection (60 Mbit, 105 ms. ping to the server) this page renders (including
executing all javascript):
And that's on a very simple page that is already highly optimized. As we all know, **speed** is the
most important aspect of a web page. Having tools to increase the speed of already highly optimized
pages by 250% is insane.
40. 820 ms
Subsequent reload
On my home internet connection (60 Mbit, 105 ms. ping to the server) this page renders (including
executing all javascript):
And that's on a very simple page that is already highly optimized. As we all know, **speed** is the
most important aspect of a web page. Having tools to increase the speed of already highly optimized
pages by 250% is insane.
41. 320 ms
Reload with appcache
On my home internet connection (60 Mbit, 105 ms. ping to the server) this page renders (including
executing all javascript):
And that's on a very simple page that is already highly optimized. As we all know, **speed** is the
most important aspect of a web page. Having tools to increase the speed of already highly optimized
pages by 250% is insane.
55. Path caching
You can use similar things to make your application perceivably faster for users via path caching.
Guess which way they go.
56. Example, BBC is list-detail example. On the left list of news stories. User can click through. We don’t
want to wait when we click.
57. Example, BBC is list-detail example. On the left list of news stories. User can click through. We don’t
want to wait when we click.
58. When laoding the front page. Make separate calls to get the data, let it expire. Dont do calls twice.
Cache images via normal Image JS thing.
59. When laoding the front page. Make separate calls to get the data, let it expire. Dont do calls twice.
Cache images via normal Image JS thing.
60. When laoding the front page. Make separate calls to get the data, let it expire. Dont do calls twice.
Cache images via normal Image JS thing.
61. When laoding the front page. Make separate calls to get the data, let it expire. Dont do calls twice.
Cache images via normal Image JS thing.
62. When laoding the front page. Make separate calls to get the data, let it expire. Dont do calls twice.
Cache images via normal Image JS thing.
63. Then when getting the story when user clicks: get data from local storage. If no internet, always get it.
Tah dah. Works offline!
64. Then when getting the story when user clicks: get data from local storage. If no internet, always get it.
Tah dah. Works offline!
65. Then when getting the story when user clicks: get data from local storage. If no internet, always get it.
Tah dah. Works offline!
66. Part III: The future
Let’s take a peek into the future
67. AppCache
AppCache sounds pretty amazing right? Well, not everyone agrees... Jake Archibald, anyone heard of
this guy?
(Lists some key problems with AppCache)
68. Give developers !ne-grained
control about caching,
without breaking the web
So a new proposal popped up written by Google (and backed up by Mozilla since then). Originally
known under `NavigationControllers`, and currently under `ServiceWorkers`. Main goal:
74. Example: registering
Runs in separate thread just like normal worker. Easy feature detection, no support? no registration,
nothing happens. This also means that you can *just* build for ServiceWorkers.
This is for the whole domain
75. Example: registering
Runs in separate thread just like normal worker. Easy feature detection, no support? no registration,
nothing happens. This also means that you can *just* build for ServiceWorkers.
This is for the whole domain
76. Example: registering
Runs in separate thread just like normal worker. Easy feature detection, no support? no registration,
nothing happens. This also means that you can *just* build for ServiceWorkers.
This is for the whole domain
77. Example: use cache
It’s like an HTTP proxy all written in client side javascript. It also doesn’t break HTTP, because your
code will still do normal AJAX requests etc. If there are no service workers enabled, this code won’t run
and we’ll consult the server.
78. Example: use cache
It’s like an HTTP proxy all written in client side javascript. It also doesn’t break HTTP, because your
code will still do normal AJAX requests etc. If there are no service workers enabled, this code won’t run
and we’ll consult the server.
79. Example: use cache
It’s like an HTTP proxy all written in client side javascript. It also doesn’t break HTTP, because your
code will still do normal AJAX requests etc. If there are no service workers enabled, this code won’t run
and we’ll consult the server.
80. Spec & playing around
https://github.com/slightlyoff/ServiceWorker
It's testable, there is a polyfill available, but it's really for experimenting only.
81. OMGAWESOME
Want to see Firefox OS?
OMG AWESOME SHIT. Now you know how to make offline web apps. I know that there will be a bunch
of ppl that want to know more about FFOS. Meet me afterwards. I also have devices with me.
Now ONE MORE THING... This is too good not to show. A commercial from Movistar about Firefox OS
to get you excited about that.