The document discusses various HTML5 features for building modern web applications, including polyfills, semantic elements, data binding, WebSockets, drag and drop, graphics, and local storage. It provides overviews of the features and considerations for support in older browsers. Libraries are recommended to make APIs easier to use, such as Knockout for data binding, jQuery UI and SignalR for drag and drop and WebSockets, and Lawnchair and db.js for local storage. While not all HTML5 features are equally useful, with polyfills many can be supported in older browsers.
Owning Web Performance with PhantomJS 2 - Fluent 2016Wesley Hales
Running a synthetic testing server or script to measure web performance is a great entry point into the world of automated web-page testing. We have an abundance of standardized APIs to measure every part of how the page renders in the browser. PhantomJS 2, released in 2015, gives us the ability to measure navigation timing APIs in an automated fashion.
Wesley Hales introduces the basics of creating a simple PhantomJS script that only extracts the performance data we need (from the W3C Navigation Timing API) and explains how this script can be Dockerized and run across many different nodes and regions of the Web. You’ll walk away with a new view on automated web-performance testing and the tools required to setup a simulated RUM network.
This lightning talk provides a brief, non-technical overview of Ruby on Rails, suitable for both management and technical professionals. For an audience of Rails "newbies", the focus of the presentation is just on educating viewers about Rails. For a more experienced audience, the spin is typically on how the audience can effectively educate others about Rails as a technology.
Owning Web Performance with PhantomJS 2 - Fluent 2016Wesley Hales
Running a synthetic testing server or script to measure web performance is a great entry point into the world of automated web-page testing. We have an abundance of standardized APIs to measure every part of how the page renders in the browser. PhantomJS 2, released in 2015, gives us the ability to measure navigation timing APIs in an automated fashion.
Wesley Hales introduces the basics of creating a simple PhantomJS script that only extracts the performance data we need (from the W3C Navigation Timing API) and explains how this script can be Dockerized and run across many different nodes and regions of the Web. You’ll walk away with a new view on automated web-performance testing and the tools required to setup a simulated RUM network.
This lightning talk provides a brief, non-technical overview of Ruby on Rails, suitable for both management and technical professionals. For an audience of Rails "newbies", the focus of the presentation is just on educating viewers about Rails. For a more experienced audience, the spin is typically on how the audience can effectively educate others about Rails as a technology.
How difficult is it to port Flex and Silverlight applications to HTML5? That is the question we hear every day at ComponentOne. Instead of speculating about it, we decided to sit down and try it. Today we will discuss the process and tools we used when doing so. The approach we took was to use the MVVM pattern (from Silverlight) when developing the HTML5/JavaScript version. By choosing this method we were able to port our data access and UI layers quite easily. Our developers were able to minimize the cost of learning new paradigms in this migration by reusing most of their knowledge. What we ended up with was nearly identical applications in Silverlight and HTML5. Come learn how you can smoothly transition to HTML5!
This presentation is about building Single Page Applications. It was written for a .NET Meetup in Uruguay, so it will also be targeted at Microsoft developers.
A Smooth Transition to HTML5 Using MVVMChris Bannon
How difficult is it to port Silverlight applications to HTML5? That is the question we hear every day at ComponentOne. Instead of speculating about it, we decided to sit down and try it. Today we will discuss the process and tools we used when doing so. The approach we took was to use the MVVM pattern (from Silverlight) when developing the HTML5/JavaScript version. By choosing this method we were able to port our data access and UI layers quite easily. We take advantage of tools like KnockoutJS and Wijmo to make the process even easier. Our developers were able to minimize the cost of learning new paradigms in this migration by reusing most of their knowledge. What we ended up with was nearly identical applications in Silverlight and HTML5. Come learn how you can smoothly transition to HTML5!
Building WordPress sites with AngularJS and the RESTful plugin JSON APIEric Greene
Developers can build great single-page WordPress sites using AngularJS and the RESTful plugin JSON API. This session will demonstrate building a single-page web site with WordPress using AngularJS and the JSON API WordPress plugin. Some knowledge of AngularJS and REST services would be helpful to those who attend.
Does the world need another front-end JavaScript framework. Apparently it does. This is a presentation on the need for a mobile and desktop web framework, and one possible rebuilding of the wheel.
WebAssembly became 4th official language on the Web (following HTML, CSS and JavaScript) and was initially meant to run in the browser in order to improve client side rendering. It quickly turned out that WebAssembly on the server is also a thing and can revolutionise the way we think of web applications. Fastly and Cloudflare adopted WebAssembly and allow you to run custom code at the edge. That opens up completely new possibilities - authentication, personalised content rendering, A/B testing - you name it. Everything as close to end users as possible.
Google Developers Group Cloud Los Angeles, Progressive Web Applications by Ta...Marie Smith
Google Developers Group Cloud Los Angeles, Progressive Web Applications by Tamas Piros, Cloudinary, Google Developer Expert for Google Chrome Developers Summit Extended December 2020
27.1.2014, Tampere. Perinteinen mobiilimaailma murroksessa. Petri Niemi: Sing...Tieturi Oy
Perinteisistä web-sivustoista kohti moderneja web-sovelluksia: mitä ovat niin sanotut ’single page applications’ ja mihin niitä käytetään? Entä miten taikasanat HTML5, AJAX ja HTTPRest liittyvät asiaan?
How difficult is it to port Flex and Silverlight applications to HTML5? That is the question we hear every day at ComponentOne. Instead of speculating about it, we decided to sit down and try it. Today we will discuss the process and tools we used when doing so. The approach we took was to use the MVVM pattern (from Silverlight) when developing the HTML5/JavaScript version. By choosing this method we were able to port our data access and UI layers quite easily. Our developers were able to minimize the cost of learning new paradigms in this migration by reusing most of their knowledge. What we ended up with was nearly identical applications in Silverlight and HTML5. Come learn how you can smoothly transition to HTML5!
This presentation is about building Single Page Applications. It was written for a .NET Meetup in Uruguay, so it will also be targeted at Microsoft developers.
A Smooth Transition to HTML5 Using MVVMChris Bannon
How difficult is it to port Silverlight applications to HTML5? That is the question we hear every day at ComponentOne. Instead of speculating about it, we decided to sit down and try it. Today we will discuss the process and tools we used when doing so. The approach we took was to use the MVVM pattern (from Silverlight) when developing the HTML5/JavaScript version. By choosing this method we were able to port our data access and UI layers quite easily. We take advantage of tools like KnockoutJS and Wijmo to make the process even easier. Our developers were able to minimize the cost of learning new paradigms in this migration by reusing most of their knowledge. What we ended up with was nearly identical applications in Silverlight and HTML5. Come learn how you can smoothly transition to HTML5!
Building WordPress sites with AngularJS and the RESTful plugin JSON APIEric Greene
Developers can build great single-page WordPress sites using AngularJS and the RESTful plugin JSON API. This session will demonstrate building a single-page web site with WordPress using AngularJS and the JSON API WordPress plugin. Some knowledge of AngularJS and REST services would be helpful to those who attend.
Does the world need another front-end JavaScript framework. Apparently it does. This is a presentation on the need for a mobile and desktop web framework, and one possible rebuilding of the wheel.
WebAssembly became 4th official language on the Web (following HTML, CSS and JavaScript) and was initially meant to run in the browser in order to improve client side rendering. It quickly turned out that WebAssembly on the server is also a thing and can revolutionise the way we think of web applications. Fastly and Cloudflare adopted WebAssembly and allow you to run custom code at the edge. That opens up completely new possibilities - authentication, personalised content rendering, A/B testing - you name it. Everything as close to end users as possible.
Google Developers Group Cloud Los Angeles, Progressive Web Applications by Ta...Marie Smith
Google Developers Group Cloud Los Angeles, Progressive Web Applications by Tamas Piros, Cloudinary, Google Developer Expert for Google Chrome Developers Summit Extended December 2020
27.1.2014, Tampere. Perinteinen mobiilimaailma murroksessa. Petri Niemi: Sing...Tieturi Oy
Perinteisistä web-sivustoista kohti moderneja web-sovelluksia: mitä ovat niin sanotut ’single page applications’ ja mihin niitä käytetään? Entä miten taikasanat HTML5, AJAX ja HTTPRest liittyvät asiaan?
Presented as a GrapeCity webinar on May 24, 2017, this presentation describes the need for front-end JavaScript frameworks in modern web development and compares features of the most popular frameworks. Click through the slides to find quick summaries of the most important talking points for each framework along with links to demos, an e-book, and a free download of the Wijmo JavaScript UI library. With front-end web frameworks now more popular than ever, there's never been a better time to start learning!
This is the presentation on HTML5, the newer version of HTML.
I've discussed only the 5 new features of the HTML5 & they are
1.Canvas/SVG
2.Video
3.Geolocation
4.App cache & Database
5.Web Workers
JQuery Mobile vs Appcelerator Titanium vs Sencha TouchSteve Drucker
During this briefing for developers and I.T. managers, you'll get an in-depth review of the three most popular javascript-based mobile application development platforms - jQuery Mobile, Sencha Touch, and Appcelerator Titanium! You'll review the development tools, hear about the developer and debugging experience, and participate in a brief code review in order to determine which framework is the most appropriate for your next mobile project! We'll demonstrate how each framework can be used to develop the same mobile app, highlighting the strengths and weaknesses of each.
Note that the full 2.5 hour video of this presentation is available at http://bit.ly/Y04lDi
Familiar Tools, New Possibilities: Leveraging the Power of the Adobe Web Pub...John Hartley
From the 2011 ACE/NETC Conference in Denver, CO
This presentation focuses on utilizing technologies such as jQuery, CSS, Ajax/Spry, Wordpress, and other tools to extend the capabilities of the Adobe web publishing system. The Adobe web publishing system is primarily composed of Dreamweaver, Contribute, and the Contribute Publishing Server. Dreamweaver is used by web designers and developers to create websites. Contribute is used by the non-technical subject matter experts to edit the content of the websites through a simple graphic user interface similar to Microsoft Word. The Contribute Publishing Server controls the file permissions and other administrative settings of the websites. These programs also integrate with other Adobe products including Flash/Flex, Acrobat, InDesign, Photoshop, and other familiar programs. Technologies, such as the ones that will be discussed, are extremely useful in constructing interactive site navigation, in tailoring mobile sites, or in utilizing blogs and RSS integration. However, there are simple strategies to allow for easy editing of the content of the sites through Contribute without interfering with the scripting these utilize. The presenters will endeavor to give a general overview of some of the tools and technologies involved, as well as showcase a few examples of specific tricks that web designers and developers should find very useful.
Building the next generation of browser apps todayRandy Williams
As browsers evolve and mobile devices proliferate, are your SharePoint applications keeping up? Are you still using old-school, server-side technologies in web parts or application pages? By unleashing the browser’s full potential, you can deliver unparalleled responsiveness and cross-device richness. In this session, come learn how HTML 5, jQuery, and SharePoint’s client object model can spice up your applications. We’ll also see how these technologies let you “break out of the sandbox”, enhancing both on premise and SharePoint Online solutions.
Covers the following topics:
- Build "Single Page Applications” with the following JS MVC frameworks: Angular.js, Ember.js, BackBone.js
- Node.js
- Trends in Web Application Development
- Architectural patterns
I felt necessity of creating this brief slideshow, so as to help PHP Developer interns and communicating the intricacies of development with my clients easier. I thought the more deeply clients understood what really went into translating their ideas to web applications under the hood, the better it could translate to
exchange of design issues,
appreciation of development process intricacies, resulting delivery time & cost issues.
So I quickly put together information that I found on internet & have tried to make an attempt. Hope this helps other developers too... Your comments & critique are welcome in terms of improving & simplifying this slide show.
In this hands-on workshop, Maurice will personally guide you through a series of exercises designed to empower you with a deep understanding of React Server Components and the power of TypeScript. Discover how to optimize your applications, improve performance, and unlock new possibilities.
Maurice will virtually be by your side, offering comprehensive guidance and answering your questions as you navigate each exercise. By the end of the workshop, you'll have mastered React Server Components, armed with a newfound arsenal of TypeScript knowledge to supercharge your React applications.
Don't miss this opportunity to elevate your React expertise to new heights. Join our workshop and unlock the potential of React Server Components with TypeScript. Your apps will thank you.
Let's face the facts and admit it: Estimating how long it will take to build software is hard.
Why is estimation so hard? Well there are some reasons for that. Many people tend to be optimistic about how long it will take to do a task. Not surprising when we learn the way memory works. It tends to skew our experiences from old projects. We often forget the many small setbacks encountered. Another reason is that many tasks are not included in the initial estimate. They only become visible over time.
Does that mean that estimation is impossible and a waste of time?
Not at all. Many software development activities are commercial activities. Starting something without even a rough estimate of what the costs and timeline will be is risky at best.
Surati Tech Talks 2022 / Build reliable Svelte applications using CypressMaurice De Beijer [MVP]
Tired of having users email you that your Svelte application is broken? Turns out that building reliable applications is hard and requires a lot of testing. You can write unit tests but quite often these all pass and the application is still broken. Why? Because they test parts of the application in isolation. But for a reliable application we need more. We need to make sure that all parts, including the backend API’s, work together as intended.
Cypress is a great tool to achieve this. It will test you complete web application in the browser and use it like a real world user would. In this session Maurice will show you how to use Cypress during development and on the CI server with Svelte. He will share tips and tricks to make your tests more resilient and more like how an actual end user would behave.
Tired of having users email you that your web application is broken? Turns out that building reliable web applications is hard and requires a lot of testing. You can write unit tests but quite often these all pass and the application is still broken. Why? Because they test parts of the application in isolation. But for a reliable application we need more. We need to make sure that all parts work together as intended.
Cypress is a great tool to achieve this. It will test you complete web application in the browser and use it like a real user would. In this session Maurice will show you how to use Cypress during development and on the CI server. He will share tips and tricks to make your tests more resilient and more like how an actual end user would behave.
Building a small to medium size business application with React isn't terribly hard. It has been done lots of times and there is plenty of information about what works and what doesn't. However building a large, complex and mission critical application with React is another matter. How to configure reliable hosting on Azure for the front and back-end? How to track runtime errors that happen in the browser. And how to create an efficient workflow between front and back-end teams. In this session Maurice de Beijer will share his experiences in building a globally deployed application that is used by thousands of people who depend on the availability and proper functioning of the application for a safe work environment.
https://azconf.dev/
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?
There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.
Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
https://reactadvanced.com/workshops-3h
Building a small to medium size business application with React isn't terribly hard. It has been done lots of times and there is plenty of information about what works and what doesn't. However building a large, complex, distributed and mission critical application with React is another matter. Add occasional poor mobile connectivity and things become really challenging. That doesn't mean that it is impossible, it is just harder to architect and develop. In this session Maurice de Beijer will share his experiences in building a globally deployed application that is used by thousands of people who depend on the availability and proper functioning of the application for a safe work environment.
https://www.c-sharpcorner.com/events/react-virtual-conference2
Building a small to medium size business application with React isn't terribly hard. It has been done lots of times and there is plenty of information about what works and what doesn't. However building a large, complex, distributed and mission critical application with React is another matter. Add occasional poor mobile connectivity and things become really challenging. That doesn't mean that it is impossible, it is just harder to architect and develop. In this session Maurice de Beijer will share his experiences in building a globally deployed application that is used by thousands of people who depend on the availability and proper functioning of the application for a safe work environment.
https://www.meetup.com/nl-NL/tilburg-tech-tuesdays/events/277150883/
Een kleine React applicatie bouwen met een backend is niet moeilijk. Maar wat als de applicatie groter en complexer wordt? Dan wordt het een ander verhaal. En al helemaal als het een publiek toegankelijke applicatie is.
Plotseling blijkt dat allerlei vaak gedane aannames niet meer kloppen. Je krijgt te maken met netwerkstoringen en schaalbaarheid. Verschillende teams die onafhankelijk van elkaar aan de front- en backend werken. Runtime fouten die optreden omdat sommige browsers toch net even anders blijken te werken dan je verwacht.
In deze sessie gaat Maurice de Beijer zijn ervaringen delen over hoe je dit aan kan pakken.
The React team rewrote the book on developing components. Before we had a choice between classes and functional components. Yet many components needed to be classes. A functional component was often too limited. Now, using hooks, we can extend functional components to be as powerful as we want.
Suspense and asynchronous rendering is in the future of React. It will make large applications much more responsive and easier to deal with. Getting started with suspense and asynchronous rendering isn't hard as you will discover.
Come to this session to learn what React hooks are and how to get started using hooks. But be warned, once seen React hooks can’t be unseen and your React components will never be the same again.
Tired of having users email you that your web application is broken? Turns out that building reliable web applications is hard and requires a lot of testing. You can write unit tests but quite often these all pass and the application is still broken. Why? Because they test parts of the application in isolation. But for a reliable application we need more. We need to make sure that all parts work together as intended.
Cypress is a great tool to achieve this. It will test you complete web application in the browser and use it like a real user would. In this session Maurice will show you how to use Cypress during development and on the CI server. He will share tips and tricks to make your tests more resilient and more like how an actual end user would behave.
React keeps on evolving and making hard things easier for the average developer.
One case, where React was not particularly hard but very repetitive, is working with AJAX request. There is always the trinity of loading, success and possible error states that had to be handled each time. But no more as the <Suspense /> component makes life much easier.
Another case is performance of larger and complex applications. Usually React is fast enough but with a large application rendering components can conflict with user interactions. Concurrent rendering will, mostly automatically, take care of this.
You will learn all about using , showing loading indicators and handling errors. You will see how easy it is to get started with concurrent rendering. You will make suspense even more capable by combining it with concurrent rendering, the useTransition() hook and the component.
The React team has rewritten the book on developing components several times. This time they have introduced Suspense. Amongst other thing this makes splitting your application into multiple bundles easier. But that is only the start as the real innovation comes when loading data. Gone are the side effect hooks with the typical loading, loaded and error states. Instead we can suspend components when loading data. Need to do multiple request? No problem you can suspend multiple components at the same time if you want. Need to trap errors? No problem just use a standard React error boundary. Come to this session to learn what React Suspense can do for you.
Reactive and functional programming, you have probably heard the term mentioned before. It’s supposed to be really cool and a good practice. But what is reactive programming exactly and how to get started with it in JavaScript? And why does Angular start using the reactive extensions for JavaScript (RxJS) instead of standard promises?
In this presentation, Maurice is going to show you how to get started with RxJS, the JavaScript implementation of the ReactiveX library. You will learn why using RxJS is a great way of dealing with streams of events in an asynchronous and functional way.
Using restful APIs can be hard on your React applications. Before you know it, you are doing lots of parallel queries to the server. Using GraphQL instead of REST might help a lot. Instead of downloading many complete resources each component declares its own needs. Then the GraphQL client library then combines these requirements. The result is a single optimized query for the server. In this session, Maurice de Beijer is going to show you how to get started with GraphQL in your React applications.
2. Who am I
Maurice de Beijer
The Problem Solver
Microsoft Integration MVP
DevelopMentor instructor
Twitter: @mauricedb
Blog: http://msmvps.com/blogs/theproblemsolver/
Web: http://www.HTML5Support.nl
E-mail: mauricedb@computer.org
3. What we aren’t going to cover
But I would really like to!
Asynchronous Module Definition/RequireJS
TypeScript
CSS3
LESS/SASS
Tooling
But I will in my Modern Web Development session at
the TechDays
4. What are we going to cover
Polyfills
Semantic elements
Databinding & templates
WebSockets
Drag/Drop
Graphics
Storing data in the browser
5. The demo application
Multiple concurent users
Business rules that need to be enforced
Use charts for reporting
Support multiple devices
Desktop
Tablet with touch
Support old versions of Internet Explorer
10 to 20% of users use Internet Explorer 8
http://bit.ly/DotNed
6. Polyfills
Not every browser supports every HTML5 feature
Especially true with old browsers
Many missing features can be added using a polyfill
Offers the standard API
Often done in JavaScript
JavaScript is slow in older browsers
A few good lists to check
Modernizr HTML5 Cross Browser Polyfills
HTML5 please
7. HTML5 Semantic elements
New HTML5 elements
<nav>
<section>
<header>
<footer>
<article>
<aside>
9. HTML5 Semantic elements
Why use them?
Searchability
Accessibility
Neither really makes sense
Search engines don’t really care
Use WAI-ARIA for accessibility support
Make sure to add support in older versions of IE
Modernizr
Html5Shiv
11. Databinding & templates
Construct HTML snippets using JavaScript or jQuery
Is tedious as best
Use a richer application library
Backbone
Knockout
Ember
...
Choosing one is a matter of taste
Checkout TodoMVC for a comparison with a to do app
My choice is Knockout
13. WebSockets
A bi-directional socket connection
Between a web browser and the web server
The server can push updates to the browser
Refreshing the browser to see updates is so 2012
Not just for games and chat applications
Any application where you want fast updates
Decrease the chance of concurrency issues
15. WebSockets
Suffers from lack of infrastructure support
Routers and firewalls can cause issues
The API is low level
Messages are just simple objects
You might need to retransmit missed messages
Use ASP.NET SignalR
Uses WebSockets if possible
Otherwise it uses fallbacks like Comet
Supports scale out scenarios
Uses a very simple API
17. Drag and Drop
Drag and drop can be a very intuitive user interaction
Often seen as more fun by users
Very common interaction on tablets
But works equally well with a mouse
HTML5 supports drag and drop
Including dragging from the file system
19. Drag and Drop
Use jQuery UI instead of the HTML5 capabilities
Use jQuery UI Touch Punch for touch support
Add -ms-touch-action: none in CSS for Windows 8
21. Graphics
Rich graphics are common in modern applications
Interactive graphics
Charts
Often generated on the client
Not just images downloaded from the server
Two basic options
Scalable Vector Graphics
Canvas
22. Comparison of Canvas and SVG
Canvas SVG
Pixel-based (canvas is essentially an image Object Model-based (SVG elements are
element with a drawing API) similar to HTML elements)
Single HTML element similar to <img> in Multiple graphical elements which become
behavior part of the Document Object Model (DOM)
Visual presentation created with markup and
Visual presentation created and modified
modified by CSS or programmatically through
programmatically through script
script
Event model/user interaction is coarse—at
Event model/user interaction is object-based
the canvas element only; interactions must be
at the level of primitive graphic elements—
manually programmed from mouse
lines, rectangles, paths
coordinates
API does not support accessibility; markup-
SVG markup and object model directly
based techniques must be used in addition to
supports accessibility
canvas
25. Graphics
Use a library to make the API easier
Don’t worry about Canvas versus SVG
jqPlot is great for charts
It uses canvas
Includes exCanvas for IE 7/8 support
Raphaël is a great choice for general graphics
It uses SVG
Uses VML for IE 7/8 support
27. Storing data in the browser
Lots of data changes only infrequently
Don’t waste time by loading it every time
HTTP caching can help
But is less flexible
HTML5 has two mechanisms for local storage
LocalStorage is a simple dictionary
IndexedDB is a document database
Web SQL is also an option but has been deprecated
31. Storing data in the browser
LocalStorage is well supported
Except in very old versions of IE
IndexedDB is much more powerful
But the API is hard to use
Lawnchair is easy to use
Abstracts the underlying data storage
Can use LocalStorage, IndexedDB or other storage
db.js makes IndexedDB easy to use
But requires a polyfill in old browsers
33. Conclusion
There is lots of goodness in HTML5
But not everything is as useful
Some of the API’s are hard to use
But there are good libraries to make things easier
Think about support with older browsers
Use polyfills where needed
Download the demo code