No one wants a slow loading, slow reacting application. As page weight has increased so has the dependency on JavaScript to drive rich user experiences. Today many pages load over 2MBs of JavaScript, but is this healthy? Do your scripts and dependencies perform well? In this session we will review common JavaScript performance bottlenecks, how to detect them and how to eliminate them.
This session will review common bad coding syntax, architecture and how to replace them with better alternatives. You will also be exposed to caching, code organization, build and deployment best practices that produce the best user experiences. Finally, you will see how to use the navigation timing and performance timing APIs to fine tune your applications to produce a fast, lean application your customers will love.
Enough with the javas cript already! de Nicholas ZakasKubide
The document discusses the growing prevalence and performance issues of JavaScript-heavy websites. It argues that much of the client-side logic in JavaScript libraries can be moved to the server by sharing code between server and client. Several companies that have done this, like Twitter and Airbnb, are cited as seeing significant improvements to initial page load times and a better user experience. The document also advocates for a progressive enhancement approach to JavaScript, loading scripts intelligently based on user needs and minimizing unused code.
Building Progressive Web Apps for Android and iOSFITC
Presented at Web Unleashed 2017. More info at www.fitc.ca/webu
Presented by Simon MacDonald, Adobe
Overview
Progressive Web Apps are the new hotness with Google pressing hard to make them the defacto choice for building mobile applications but what’s to be done about iOS where many of the key API’s are not supported. That’s where Apache Cordova/PhoneGap comes in by polyfilling the missing functionality. In this talk Simon will show you how to create a PWA that runs on the web, Android and iOS from a single code base. Take advantage of some new tools to easily deploy and test your PWA.
Beginning with a brief overview of Progressive Web Apps, what features make your web app progressive and which API’s you can take advantage of, Simon will discuss the availability of these API’s on various platforms, taking care not to completely dump on Apple for falling behind. No, that’s a lie, he will jokingly take Apple to task.
He will introduce Apache Cordova/PhoneGap, explaining how you can use Apache Cordova/PhoneGap to deploy a web application to Android and iOS; explaining how Cordova plugins allow us to polyfil the missing functionality on iOS.
Simon will demo a PWA running on the desktop in Chrome, Android in Chrome and as a compiled hybrid app on iOS all from the same codebase.
Objective
To introduce developers to building progressive web apps for all platforms.
Target Audience
Web application developers
Five Things Audience Members Will Learn
What are Progressive Web Apps
How to build a progressive web app
The differences between PWA’s on Chrome and Safari
How to use a single code base to target web, Android and iOS
How to deploy a PWA on iOS as an app
Developing High Performance Web Apps - CodeMash 2011Timothy Fisher
This document provides an overview of techniques for developing high performance web applications. It discusses why front-end performance matters, and outlines best practices for optimizing page load times, using responsive interfaces, loading and executing JavaScript efficiently, and accessing data. The presentation recommends tools for monitoring and improving performance, such as Firebug, Page Speed, and YSlow.
Peter Lubbers from Kaazing gave a presentation on HTML5 features such as Web Workers, Geolocation, and WebSockets. He discussed how these new technologies allow for asynchronous background processing, location detection, and bi-directional real-time communications without polling. Browser support for HTML5 features was also reviewed.
Presented at Web Unleashed 2017. More info at www.fitc.ca/webu
Presented by Ksenija Gogic, TWG
Overview
What are components? How can designers apply a component-minded approach to their workflow? How can we leverage components to improve the design handoff? Ultimately – how can designers and developers work together even better?
Using React as a framework, Ksenija will discuss how to design for a component-based web application to make for a more efficient workflow, an easier design handoff, and a better understanding between roles.
Objective
To create a common language and understanding when working with component-based web frameworks between designers and developers.
Target Audience
Designers and developers looking to make their collaborative workflow even better.
Five Things Audience Members Will Learn
How to take a component-minded approach to building a design system
How to design and create components using Sketch symbols
How to assemble (compose) collections of components using Sketch symbols
How to work with modifiers (props) to customize components
How to ensure everyone is speaking the same language
The document discusses optimizing web performance for mobile devices. It covers mobile web platforms and browsers, the importance of performance on mobile, tools for measuring performance, optimizing initial loading and above-the-fold content within 1 second, and maintaining responsiveness. The key recommendations are to measure on real devices, avoid redirects, reduce requests, load above-the-fold content quickly and defer the rest, and prioritize simplicity over complex designs and frameworks.
This document discusses HTML5 and provides an overview of its key features. It explains that HTML5 is not just the HTML language, but also includes related APIs that allow richer functionality. Some of the major areas covered include semantics and accessibility, rich internet applications using new APIs, and specific technologies like canvas, video/audio, web storage, and web workers. The document emphasizes that HTML5 is still evolving and aims to unify web development across browsers.
Grokking #9: Building a real-time and offline editing service with CouchbaseOliver N
In this talk, I would like to share how we build a system for LitiBook that can handle (1) real-time editing, (2) offline editing, (3) synchronizing between devices and (4) conflict between different editing sessions. There are not much applications out there can do all these above things. (Evernote does not resolve conflict. Hackpad, Trello and Asana do not support offline). So the challenge is really interesting.
Overview of the new frontend architecture used for the New Profile at LinkedIn.
Blog version of this slidedeck: https://engineering.linkedin.com/profile/engineering-new-linkedin-profile
Server and client rendering of single page appsThomas Heymann
This document discusses server and client rendering of single page applications. It outlines a wish list tool that was built to track products, receive alerts, and share lists. The goals are to improve the UI, separate the wish list into microservices, and update the frontend using modern frameworks. Shared rendering concerns between server and client are discussed, along with an architecture using Node.js, Express, Backbone, Handlebars and other technologies. Challenges with routing, data fetching, caching and other areas are covered, as well as potential solutions like React and Rendr. Overall it was found to be worthwhile but still immature, requiring better frameworks.
The document discusses the MEAN stack, which is a full-stack JavaScript framework that uses MongoDB, ExpressJS, AngularJS, and Node.js. It provides an overview of each component, explaining that MongoDB is the database, ExpressJS is the web application framework, AngularJS is the front-end framework, and Node.js is the web server. The MEAN stack allows for full-stack development with JavaScript and provides benefits like asynchronous communication and being easy to start developing with.
Presented at Web Unleashed 2017
More info at www.fitc.ca/webu
Overview
Most people feel a lot less restricted to open up a browser in lieu of installing a mobile app. The convenience, security and simplicity of just typing a URL into an address bar is a powerful advantage of the web, and Progressive Web Apps (PWA) combine this with the feel of native applications.
In short, PWAs are applications that use modern web capabilities to provide a user experience similar to that of mobile and native apps. This presentation will go over how you can add a number of progressive aspects to your application including faster load times, offline support and the ability to install to your mobile home screen.
Objective
Explain the concept of Progressive Web Apps, how to build one and how to improve apps built with React, Angular or any other framework without adding too much complexity.
Target Audience
Front-end developers
Assumed Audience Knowledge
Some understanding of building web applications with a JavaScript framework or library
Five Things Audience Members Will Learn
What exactly is a Progressive Web App
How to use Lighthouse to test and improve your webpage
Improve app loading times with a Service Worker App Shell
Use a App Shell + Dynamic Content model to allow for offline support
Add a web app manifest file to allow for installing an app to a mobile home screen
The fundamental problems of GUI applications and why people choose ReactOliver N
Instead of asking people which JavaScript framework to learn, let's look back into GUI application architecture (which Web Front-end is a case). Then you will understand why people created those library & frameworks and why React became so popular.
The document discusses the importance of website performance and provides tips to build responsive websites. It notes that users expect pages to load within 2 seconds and will leave slow sites. The tips include reducing HTTP requests, gzipping and minifying components, optimizing images, delivering JavaScript and CSS efficiently, lazy loading images, and inlining critical CSS. Following these foundations and techniques can significantly improve load times and user experience.
Modern Web Apps should be focused, rich, and gorgeous, but they also need to be FAST. After all, being rich and beautiful isn't always enough!
With web apps, faster is always better; nobody will ever complain that your site is too fast!
webOS is an open source mobile operating system from Palm built on HTML5, CSS, and JavaScript that uses the Mojo framework for application development and provides services through a plugin development kit and application programming interfaces, with apps distributed through an online app catalog.
Marko Heijnen discussed several ways to extend WordPress, including hooks, drop-ins, pluggable functions, and pluggable classes. He demonstrated wpcentral.io, which collects WordPress usage data, and opensesh.org, a conference platform built with Node.js. He explained how to build extensions for the future by future-proofing code and looking at new technologies like Node.js.
The document provides an overview of developing high performance web applications, focusing on optimizing front-end performance. It discusses why front-end performance matters, and provides best practices for optimizing page load time, developing responsive interfaces, and efficiently loading and executing JavaScript. The document also covers DOM scripting techniques, tools for profiling and analyzing performance, and how the performance monitoring service Gomez can be extended to better measure client-side metrics.
This document provides a summary of a presentation on using jQuery with SharePoint. It discusses:
1) Why jQuery is useful for SharePoint - it allows dynamic updates without custom code, improves visuals and usability, and can work around limitations like the list view threshold.
2) The basics of using jQuery with SharePoint, including common methods to interact with elements, attributes, and SharePoint list data via APIs.
3) Best practices for jQuery development, such as putting code in document ready functions, debugging techniques, and chaining methods to concisely select and update elements.
The SharePoint & jQuery Guide - Updated 1/14/14Mark Rackley
Latest version of my SharePoint & jQuery slides from SharePoint Saturday St. Louis.
This session introduces people to using jQuery in SharePoint, how to get started, and some best practices.
This document discusses techniques for improving frontend performance. It recommends making fewer HTTP requests, using a content delivery network, adding expiration headers, gzipping components, optimizing stylesheet and script placement, avoiding redirects and duplicate scripts, and more. It also covers techniques for loading scripts asynchronously without blocking page rendering, such as using script elements, XHR, and iframes. Faster page loads can improve user experience and increase revenue.
Building a high performance front end is a balancing act. You need to understand all the different moving parts and subsystems in the browser and how they interact with each other.
Small changes can significantly impact page and app load time, memory consumption, and processor use which has a huge impact on your user’s experience!
In this session, we will dive into the subsystems of the browser and learn to optimize performance on sites and in web apps.
We will also deep dive into the new performance analyzing tools available expose good and bad run-time patterns for your sites and web apps, and provide users with a fast and fluid experience.
This document discusses developing sandboxed solutions in SharePoint. It covers setting up a sandbox development environment in Visual Studio 2010, building the feature structure and web template, making the solution locally installable, structuring the data, adding chrome, business logic, provisioning jQuery, custom web parts, views and connections. The session aims to teach the right approach to sandbox development and common issues.
When Orbitz Worldwide released a new generation of its global technology platform there were some lofty goals for the UI. They wanted to build a presentation tier (HTML, CSS, JavaScript) that would meet the goals of internationalization, accessibility, have rich Ajax interactions, and be faster and easier to develop in. This session will explore the key challenges in achieving these goals, including what worked, what didn\'t, and what\'s next.
This document summarizes Mark Meeker's presentation on lessons learned from coding user interfaces at ebookers and Orbitz. Some key lessons included following web standards, promoting code reuse, maintaining high quality code, and providing a consistent user experience. Internationalization was also a major challenge given the large number of translations and cultural differences to consider. The presentation emphasized strategies like progressive enhancement, separation of layers, and graded browser support.
The document appears to be a presentation about using jQuery with SharePoint. It discusses open wireless access being available and encourages attendees to tweet about the session and blog. It then provides information about the presenter and their background as well as an outline of the topics to be covered in the presentation, including what jQuery is, how to deploy and develop with it, interacting with SharePoint and the DOM, reading and writing list data, using third party libraries, and demos.
jQuery is a lightweight JavaScript library that simplifies HTML document traversal and manipulation, event handling, animation, and Ajax interactions. It works by using a simple syntax to select elements and perform actions on them. To use jQuery, include the jQuery library file, wrap code in a document ready function, and use the $ selector and jQuery methods. jQuery greatly improves the efficiency of JavaScript coding.
Javascript and first-class citizenry: require.js & node.js
Javascript on web pages is ubiquitous and its problems are legendary. Javascript, seen as a second-class code citizen, is usually hacked together even by seasoned developers. New libraries (jQuery, prototype, backbone, knockout, underscore) and runtime tools (firebug, jasmine) look like they solve many problems - and they do. But they still leave poorly written code as just that. One key problem is that all javascript code lives globally and this results in poorly managed, tested and delivered code.
In this session, I will illustrate that we can treat javascript as a first-class citizen using with require.js and node.js: it can be modular, encapsulated and easily unit tested and added to continuous integration cycle. The dependencies between javascript modules can also be managed and packaged just like in C# and Java. In the end, we can resolve many javascript difficulties at compile time rather than waiting until runtime.
An overview of web development essentials that will help you as a user experience designer to not only understand how to integrate designs with development components, but also to learn some tips on interacting effectively with developers.
Top 45 jQuery Interview Questions and Answers | EdurekaEdureka!
YouTube Link: https://youtu.be/nmX4ycVIXt8
** Full Stack Web Developer Masters Program: https://www.edureka.co/masters-program/full-stack-developer-training **
This Edureka PPT on "jQuery Interview Questions" will help you to prepare yourself for jQuery or web development interviews. Learn about the most important jQuery interview questions and answers and know what will set you apart in the interview process.
Follow us to never miss an update in the future.
YouTube: https://www.youtube.com/user/edurekaIN
Instagram: https://www.instagram.com/edureka_learning/
Facebook: https://www.facebook.com/edurekaIN/
Twitter: https://twitter.com/edurekain
LinkedIn: https://www.linkedin.com/company/edureka
Castbox: https://castbox.fm/networks/505?country=in
Turbocharge your development efforts your with a "hands on" introduction to quickly building apps using the MongoDB database as a service offering known as Atlas and the serverless / REST based application development environment known as Stitch. We'll begin with a brief introduction to MongoDB, Atlas, and Stitch. You will learn about 3 real world examples of two day prototypes and rapid production cycles. You will then create your own free MongoDB Atlas database as a service cluster. Then you will write your first Stitch application to put data into your database and query data out of it. You will learn how to enhance your application with serverless stitch functions and triggers. At the end of the 90 minute session you will have a hands on experience and good grasp of how to write custom serverless applications with MongoDB.
This document discusses automated acceptance testing for ASP.NET applications. It begins with a demonstration of using Selenium WebDriver to automate a Google search. The document then covers topics like the testing pipeline, challenges with real-world testing, focusing tests on solving specific pain points, and designing UI for testability. It emphasizes that UI tests should validate scenarios rather than individual actions and should focus on the most critical tests. The document also discusses tools, techniques, and strategies for testing databases, legacy systems, and more.
Web Performance Part 4 "Client-side performance"Binary Studio
The presentation is devoted to client side performance of a web app. All 4 presentations will help you reduce latency, enrich optimization of javascript code, discover tricky parts when working with API browser, see best practices of networking and learn lots of other important and interesting things. Enjoy! =)
The document discusses performance optimization techniques for web applications. It outlines six key principles: 1) quickly respond to network requests, 2) minimize bytes downloaded, 3) efficiently structure markup, 4) optimize media usage, 5) write fast JavaScript, and 6) understand what the application is doing. Specific techniques are provided for each principle, such as avoiding redirects, gzip compression, caching resources, and minimizing server processing time to improve response speed.
Ajax Performance Tuning and Best PracticesDoris Chen
Ajax Performance Tuning and Best Practices
Perhaps the most primary motivation to develop Ajax application is to have better user experience hence how to achieve the optimized response time becomes an important aspect in Ajax performance optimization. In this session, we will focus on discussing the improvement of the network transfer time and the JavaScript processing time as the server response is already generally well understood. We will use an Ajax framework case study to show how an Ajax optimization process can be used to optimize the performance. During the optimization process, we will demonstrate how to measure the performance, how to determine the bottlenecks and how to resolve the problems by applying various best practice. Various tools like NetBeans, Firebug, and YSlow will be illustrated to show when to use what and how to use them. The list of Ajax Performance tuning tips on combining CSS and JavaScript resources, setting the correct headers, using minifed JavaScript, GZip contents, and Strategically placing of CSS links and JavaScript tags will be discussed in the session.
Intermediate level Ajax and Enterprise developers can really benefit from this session.
After the session, the audience will be able to:
-apply Ajax Performance Optimization process
-choose the right tool and use them
-lleverage various best practice and performance tuning tips
-improve their Ajax application response time ultimately
Perhaps the most primary motivation to develop Ajax application is to have better user experience hence how to achieve the optimized response time becomes an important aspect in Ajax performance optimization. In this session, we will focus on discussing the improvement of the network transfer time and the JavaScript processing time as the server response is already generally well understood. We will use an Ajax framework case study to show how an Ajax optimization process can be used to optimize the performance. During the optimization process, we will demonstrate how to measure the performance, how to determine the bottlenecks and how to resolve the problems by applying various best practice. Various tools like NetBeans, Firebug, and YSlow will be illustrated to show when to use what and how to use them. The list of Ajax Performance tuning tips on combining CSS and JavaScript resources, setting the correct headers, using minifed JavaScript, GZip contents, and Strategically placing of CSS links and JavaScript tags will be discussed in the session.
Intermediate level Ajax and Enterprise developers can really benefit from this session.
After the session, the audience will be able to:
-apply Ajax Performance Optimization process
-choose the right tool and use them
-lleverage various best practice and performance tuning tips
-improve their Ajax application response time ultimately
Similar to JavaScript front end performance optimizations (20)
The Fetch API is a modern replacement of the XMLHTTPRequest object. It is based on promises and makes making AJAX/API calls easier to manage and code.
This slide deck is a quick introduction to the API.
Introduction to Progressive Web ApplicationsChris Love
Progressive Web Apps (PWAs) are websites that utilize modern web capabilities to deliver native app-like experiences to users. PWAs are built using common web technologies including HTTPS, service workers, and web app manifests. Service workers allow PWAs to work offline by caching app assets and responding to fetch events. When installed on a user's homescreen, PWAs can load quickly and feel like native applications while retaining the benefits of the web such as being discoverable, installable, and updatable.
Introduction to Progressive Web ApplicationsChris Love
Progressive Web Apps (PWAs) are websites that utilize modern web features to deliver native app-like experiences to users. The minimum requirements for a PWA are that it is served over HTTPS, includes a web app manifest, and registers a service worker. Service workers allow PWAs to work offline by handling fetch events and caching assets. While adding a PWA to a user's home screen can improve engagement, the true battleground is changing user perception of the capabilities of web apps versus native apps.
Website speed is a crucial aspect of on page SEO everyone can control. Your goal is to be interactive in under 3 seconds, even on a basic phone over a 3G connection.
However, most web sites have so many requests and large payloads this time limit or budget cannot be achieved. In fact, the average web page takes 22 seconds to load, according to Google's research.
But what if I told you there is a way to offload or even avoid loading page assets until they are needed?
This can give your website a distinct advantage over your competition because not only will Google like your pages better so will your visitors!
Progressive Web Applications are a new way to think about using the web to provide great user experiences using the best web platform features.
The education market has many opportunities to benefit their communities using PWAs to deliver information and application experiences across all devices and platforms.
The server is dead going serverless to create a highly scalable application y...Chris Love
This document discusses moving to a serverless architecture to build highly scalable applications. It defines serverless as developing applications without having to manage servers. Popular cloud services that enable serverless architectures are mentioned, including AWS Lambda, Amazon S3, API Gateway, and others. Serverless allows developers to focus on their applications instead of infrastructure.
A Day Building Fast, Responsive, Extensible Single Page ApplicationsChris Love
This is an older slide deck I realized I never uploaded.
It is a slightly longer deck than the Night at the SPA deck. This features many concepts that are forerunners to the modern progressive web application.
There are slides related to web performance best practices, JavaScript architecture, responsive web design, touch and much more.
Real World Lessons in Progressive Web Application & Service Worker CachingChris Love
Over the past year we have seen a lot of excitement around Progressive Web Applications. Browser evangelist are selling developers and business owners on their advantages and promising future. But what is the real story? What are the details to proper execution? What do engineers need to know to make their web sites into Progressive Web Applications that not only meet the minimum criteria, but meet the sales hype?
Searching the Pokedex offline is fun, what is the real experience like caching a business application? Caching application assets and data can be complex, especially for larger applications. What to cache, how long to cache and how to cache are all valid questions. Often, in an effort to just ship something, we cache nothing. When we don't cache, we disappoint the customer and miss a key promise of progressive web applications.
Using Responsive Web Design To Make Your Web Work Everywhere - UpdatedChris Love
Devices are as unique as their users. Detecting the end user’s platform is a fruitless expenditure that often leads to wrong assumptions. Maintaining multiple web applications for different platforms is not cost effective and stressful. Responsive web design is a way to design your applications for devices of all shapes, sizes and resolutions. This session covers a definition, examples and how to execute a proper mobile first responsive design. We will also cover how to use responsive images to ensure your application performs well.
Implementing a Responsive Image StrategyChris Love
Applications must implement responsive web design strategies today. However most developers are not experienced in responsive techniques. More over images have provided a difficult hurdle for developers and business stakeholders to make responsive.
A proper responsive web design strategy increases return on investment, reduces long term maintenance requirements and improves application performance. Images create many challenges in implementing responsive design.
This session will explain what responsive images are. How new web standards have enabled manageable responsive image practices. We will go over tooling and techniques to enable responsive images in your developer and line of business workflows.
When you leave this session you will have actionable knowledge of responsive images, techniques, tooling and workflow options you can apply to your projects now.
Using Responsive Web Design To Make Your Web Work EverywhereChris Love
The document discusses responsive web design and strategies for creating websites that adapt to different screen sizes. It recommends taking a mobile-first approach, using fluid layouts and media queries to make content responsive. Key tips include starting small and resizing the browser, using Chrome's device mode to emulate different devices, and the matchMedia API to bind JavaScript to breakpoints. The overall goal is to provide an optimal viewing experience across all devices.
10 things you can do to speed up your web app today 2016Chris Love
Web Sites are to slow and this is costing businesses money. Most performance issues are easy to fix. In this session we review why web performance is important and 10 simple things you can do to make a faster user experience.
If you are new to CSS or have been using it for years this presentation should give you more insight into how to write and use CSS to make your web sites better.
Using Responsive Web Design To Make Your Web Work Everywhere Chris Love
The document discusses responsive web design techniques for creating websites that work well across all device screens. It covers fluid layouts using relative units like percentages, media queries to apply styles conditionally based on screen width, and image optimization techniques like srcset and sizes attributes to serve the most appropriately sized image for different screens. The goal is to provide an optimal viewing experience for users on any device without needing separate mobile sites.
Microsoft is releasing a new Browser with Windows 10, called Edge. Edge is a fork of Internet Explorer that leaves legacy support behind and adds support for many new specs and features. This session attempts to highlight many of the changes and provide understanding of what the future holds for web developers.
10 things you can do to speed up your web app today stir trek editionChris Love
Why is Web Performance Optimization Important and what are some things developers can do to ensure their applications perform well and please end users?
Single Page Applications or SPAs are a hot topic today, however most developers feel lost. We are going to explore the basic concepts of a SPA, go over a few gotchas and traps and cover some best practices. This is not a talk about a specific framework, but more of a breakdown of how a SPA is composed, many key working concepts and some techniques you should employ for a successful modern web application.
There Is No Mobile: An Introduction To Responsive Web DesignChris Love
The web has come a long way. One of the great features of the modern web is responsive web design (RWD). RWD allows developers to create a single web client for all devices & platforms. This presentation is an introduction to key concepts developers need to understand in order to start implementing responsive web design.
Touch is now everywhere. It is almost impossible to find a personal computing device without a touch screen. This means developers and designers need to reconsider how to design client interfaces to successfully enable successful touch interactions. Touch involves layout choices, new CSS properties and new touch APIs. This session covers design concepts and how to apply new coding techniques
10 Things You Can Do to Speed Up Your Web App TodayChris Love
Web Performance is a serious issues these days. 80% of web performance issues are in the client. Many developers either do not realize what they are leaving on the table and how that affects the success of their application. These are 10 things any web developer can do in about 30-60 minutes to drastically increase page load times and thus increase the application's profitability.
10th International Conference on Networks, Mobile Communications and Telema...ijp2p
10th International Conference on Networks, Mobile Communications and
Telematics (NMOCT 2024)
Scope
10th International Conference on Networks, Mobile Communications and Telematics (NMOCT 2024) is a forum for presenting new advances and research results in the fields of Network, Mobile communications, and Telematics. The aim of the conference is to provide a platform to the researchers and practitioners from both academia as well as industry to meet and share cutting-edge development in the field.
Authors are solicited to contribute to the conference by submitting articles that illustrate research results, projects, surveying works, and industrial experiences that describe significant advances in the following areas but are not limited to.
Topics of interest include, but are not limited to, the following:
Mobile Communications and Telematics Mobile Network Management and Service Infrastructure Mobile Computing Integrated Mobile Marketing Communications Efficacy of Mobile Communications Mobile Communication Applications Critical Success Factors for Mobile Communication Diffusion Metric Mobile Business Enterprise Mobile Communication Security Issues and Requirements Mobile and Handheld Devices in the Education Telematics Tele-Learning Privacy and Security in Mobile Computing and Wireless Systems Cross-Cultural Mobile Communication Issues Integration and Interworking of Wired and Wireless Networks Location Management for Mobile Communications Distributed Systems Aspects of Mobile Computing Next Generation Internet Next Generation Web Architectures Network Operations and Management Adhoc and Sensor Networks Internet and Web Applications Ubiquitous Networks Wireless Multimedia Systems Wireless Communications
Heterogeneous Wireless Networks Operating System and Middleware Support for Mobile Computing Interaction and Integration in Mobile Communications Business Models for Mobile Communications E-Commerce & E-Governance
Nomadic and Portable Communication Wireless Information Assurance Mobile Multimedia Architecture and Network Management Mobile Multimedia Network Traffic Engineering & Optimization Mobile Multimedia Infrastructure Developments Mobile Multimedia Markets & Business Models Personalization, Privacy and Security in Mobile Multimedia Mobile Computing Software Architectures Network & Communications Network Protocols & Wireless Networks Network Architectures High Speed Networks Routing, Switching and Addressing Techniques Measurement and Performance Analysis Peer To Peer and Overlay Networks QOS and Resource Management Network-Based Applications Network Security Self-organizing networks and Networked Systems Mobile & Broadband Wireless Internet Recent Trends & Developments in Computer Networks
Paper Submission
Authors are invited to submit papers through the conference Submission System by July 06, 2024. Submissions must be original and
7. LOVE2DEV.COM
"Also take a step back for a minute and consider the
intent of this change: a faster web is great for
everyone, but especially for users. Lots of websites have
demonstrated that speeding up the user experience
results in more usage. So speeding up your website isn’t
just something that can affect your search rankings–it’s a
fantastic idea for your users.“
http://bit.ly/SPPB4k
Matt Cutts
8. GOALS
Web Trends & Some History
Front-End Architecture Best Practices
Coding Syntax
Navigation & Performance Timing API
Build & Deploy
LOVE2DEV.COM
11. The Reach of JavaScript Expanded
Web Applications/SPAs
HTML5 Games
Basic Web Pages
JavaScript Execution Speed
DOM Interactions
Accelerated Graphics
Page Load Time
20. Is JavaScript the Problem?
• Bytes Must Be Downloaded
• Bytes Cost Real Money
• 25% of US Exceeds Monthly Bandwidth
• Bytes Take Time
• Scripts Must Be Evaluated
• Libraries Can Overwrite Native APIs or Don’t Use Native
APIs
LOVE2DEV.COM
21. Don’t Guess
• Use Profiling Tools
• Establish Benchmarks
• < 1s Desktop/Broadband
• < 3s Mobile/GPRS
• Test On Real Devices Against ‘Real Site’
• Have a 2G Day
• Apply Scientific Method to Solve Problems
LOVE2DEV.COM
22. Establish a Performance Culture
• Make Perforamance a 1st Class Citizen of Your Team
• Include Developers, Architects, QA & Stakeholders
• Etsy Quarterly Performance Reports
• https://codeascraft.com/2016/04/28/q1-2016-site-
performance-report/
• Designing For Performance
• http://amzn.to/2d30GRy
28. Place Script References At The Bottom
• SCRIPT is a Blocking Action
• Allow Browser to Render As Much As Possible Before
Evaluating & Executing Scripts
29. JS Parse & Execution Time
• Scripts Must Be Downloaded
• Scripts Must Be Evaluated
• Majority of Traffic from Mobile Class Devices
• Lower Powered CPU
• Less Memory
• Etsy Tool
• https://timkadlec.com/2014/09/js-parse-and-execution-time/
31. Best Practice
• Ask If Script/Library/Framework Is Really Needed
• Are Their Alternatives?
• Strive to Use Libraries Components That Do What
Needs to be Done
32. Best Practice – Libraries & Frameworks
• Use A Single Library
• Keep Library Up To Date
• Avoid Duplicate References
• Avoid Duplicate Versions
36. ASP.NET Web Client Library
Prototype
jQuery/jQueryUI
Ember
Angular
React
37. Ask If It Is Needed
• Avoid Framework Archeology
• Don’t Use a Library/Framework to be Cool
• Resume Driven Development
• Remember the Goal is to Make the Customer Happy
• They Pay the Bills!
• Majority of Pages/Sites are Still Read-Only
38. Use Async & Defer
• Allows Browser to Finish Rendering Cycle
• Use When Script Order is not important
• Use When Script is not needed to render
40. 3rd Parties
• Often Added By Marketing Departments
• Use of Tag Managers
• Many Are Not Used by Stakeholders
• Not Part of Application/Site Q/A
• Not Managed By DevOps
• Not Held to SLA
LOVE2DEV.COM
41. 3rd Parties
• You Are Outsourcing Control Of Your Business To A
Supplier You Have Little or No Control
• They Can & Do Have A Big Impact On Your Brand Image
and Engagment
LOVE2DEV.COM
42. DOM Interactions
• Built In DOM Methods More Efficient
• Avoid Type Conversion
• Avoid DOM Chatiness
LOVE2DEV.COM
43. DOM Methods More Efficient
• querySelector
• querySelectorAll
• firstElementChild
• nextElementSibling
• previousElementSibling
• lastElementChild
• childElementCount
LOVE2DEV.COM
46. function BuildUI() {
var elm = document.getElementById('ui');
var contents = BuildTitle() + BuildBody() + BuildFooter();
elm.innerHTML = contents;
}
Batch Markup Changes
Use DOM Efficiently
47. function BuildUI() {
var elm = document.getElementById('ui');
var contents = BuildTitle() + BuildBody() + BuildFooter();
elm.innerHTML = contents;
}
Batch Markup Changes
Use DOM Efficiently
48. function BuildUI() {
var elm = document.getElementById('ui');
var contents = BuildTitle() + BuildBody() + BuildFooter();
elm.innerHTML = contents;
}
Batch Markup Changes
Use DOM Efficiently
49. function BuildUI() {
var elm = document.getElementById('ui');
var contents = BuildTitle() + BuildBody() + BuildFooter();
elm.innerHTML = contents;
}
Batch Markup Changes
Use DOM Efficiently
69. Don’t do useless work
setInterval(draw, 0);
setTimeout(draw, 0);
requestAnimationFrame(draw);
setTimeout(draw, 1000 / 60);
70. Do avoid chattiness with the DOM
JavaScript
DOM
for (var i = 0; i < this.nOfBubbles; i++) {
document.body.box.getElementById("ball0").style.left = b.x + "px";
document.body.box.getElementById("ball0").style.top = b.y + "px";
}
71. Do check types of values from DOM
this.nOfBubbles = document.getElementById(“dropDown").value;
30%
of rendering time in string conversion
Slow Operations
11%
Value Conversions
18%
GC 17%
Your Code 45%
72. JavaScript: Flexibility or performance
Flexibility Performance
“Think C++”“Think Script”
Simple Websites Complex Apps, Games
var r = 3 * "10"; // r == 300
var a = new Array();
a.push(10);
var p = {x: 0, y: 0};
p.z = 5;
p["some text"] = 1;
p[1] = 2;
eval("var s = p[1] * a[0]"); // s == 20
var r = 3 * parseInt("10");
var a = new Array(100);
a[0] = 10;
var p = new Point(0, 0, 0);
p.z = 5;
73. • C, C++, C# (Static Language)
• static int DoMath(int value) {
• int result = 0;
• for (int i = 0; i < 10000; i++) {
• for (int j = 0; j < 10000; j++)
{
• result = i + j + value;
• }
• }
• return result;
• }
JavaScript (Dynamic Language)
function DoMath(value) {
for (var i = 0; i < 10000; i++) {
for (var j = 0; j < 10000; j++) {
var result = i + j + value;
}
}
return result;
}
Stick to Integer Math
Write Fast JavaScript
74. Stick to Integer Math
Write Fast JavaScript
C++ JavaScript
DoMath(999);
40ms
200ms (~5x)
DoMath(999/2);
40ms
1600ms (~40x)
75. Stick to Integer Math
Write Fast JavaScript
0x005e22a0
Pointer
01
Type Tag
449.4999999……
…
Value
02
Type Tag
“Hello World”
Value
0x005e4148
Pointer
76. Stick to Integer Math
Write Fast JavaScript
DoMath(Math.floor(999 / 2));
var b = Math.ceil((p[i].r + p[i].g + p[i].b) / 3);
77. Stick to Integer Math
Write Fast JavaScript
DoMath(Math.floor(999 / 2));
var b = Math.ceil((p[i].r + p[i].g + p[i].b) / 3);
78. Stick to Integer Math
Write Fast JavaScript
DoMath(Math.floor(999 / 2));
var b = Math.ceil((p[i].r + p[i].g + p[i].b) / 3);
79. Do write fast objects
• Add all properties in constructor
• Don’t delete properties
• Use identifiers for property names
• Use getters and setters sparingly
• Avoid conditionally adding properties
• Avoid default property values on prototype objects
80. Navigation & Performance Timing APIs
• Give You Access to Real Times
• Various Stages of Document Lifecycle
• https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API
• http://www.html5rocks.com/en/tutorials/webperformance/basics/
82. How to Build JavaScript
• Maintain Development, QA, Production Versions
• Use a Build Tool
• Grunt, Gulp, WebPac, Broccoli, Node, etc
83. How to Build Production JavaScript
• Bundle & Minify
• A Single Request is much faster to download and parse
• Compress
• Gzip
• Content-Encoding Header
• Set Proper Cache Headers
• CacheControl: "public, max-age=31449600, s-max-age=360“
• Use A CDN
• Host on Static Server
84. How to Build Production JavaScript
• Node Modules Exists to Automate All these Requirements
• Set it and Forget It!
Editor's Notes
Update these #s before the presentation as they are always updating