This document summarizes a presentation on building single page applications for both PC and mobile. It discusses the architecture of single page applications including using HTML, CSS, JavaScript on the client side and ASP.NET on the server side. It also covers various technologies that can be used like Knockout.js, navigation libraries, and patterns for creating modular JavaScript code. The presentation demonstrates these concepts through an example single page application built with MVC 4.
WebML and WebRatio 5 - TOOLS conference, Zurich 2008Marco Brambilla
We present WebRatio 5.0, a design tool that supports WebML (Web Modelling Language). WebML is a domain specific language (DSL) for designing complex, distributed, multi-actor, and adaptive applications deployed on the Web and on Service Oriented Architectures using Web Services. WebRatio 5.0 provides visual design facilities based on the WebML notation and code generation engines for J2EE Web applications. The tool is developed as a set of Eclipse plug-ins and takes advantage of all the features of this IDE framework. It also provides support of customized extensions to the models, project documentation, and requirements specifications. The overall approach moves towards a full coverage of the specification, design, verification, and implementation of Web applications.
Web Component Development with Servlet and JSP Technologies Unit 01Prashanth Shivakumar
Download Complete Material - https://www.instamojo.com/prashanth_ns/
This Web Component Development with Servlet and JSP Technologies contains 16 Units and each unit contains 60 slides in it.
Contents…
• Introduction to Web Application Technologies
• Developing a View Component
• Developing a Controller Component
• Developing Dynamic Forms
• Sharing Application Resources Using the Servlet Context
• Designing the Business Tier
• Developing Web Applications Using Struts
• Developing Web Applications Using Session Management
• Using Filters in Web Applications
• Integrating Web Applications With Databases
• Developing JSP™ Pages
• Developing JSP Pages Using Custom Tags
• Developing Web Applications Using Struts Action Forms
• Building Reusable Web Presentation Components
WebML and WebRatio 5 - TOOLS conference, Zurich 2008Marco Brambilla
We present WebRatio 5.0, a design tool that supports WebML (Web Modelling Language). WebML is a domain specific language (DSL) for designing complex, distributed, multi-actor, and adaptive applications deployed on the Web and on Service Oriented Architectures using Web Services. WebRatio 5.0 provides visual design facilities based on the WebML notation and code generation engines for J2EE Web applications. The tool is developed as a set of Eclipse plug-ins and takes advantage of all the features of this IDE framework. It also provides support of customized extensions to the models, project documentation, and requirements specifications. The overall approach moves towards a full coverage of the specification, design, verification, and implementation of Web applications.
Web Component Development with Servlet and JSP Technologies Unit 01Prashanth Shivakumar
Download Complete Material - https://www.instamojo.com/prashanth_ns/
This Web Component Development with Servlet and JSP Technologies contains 16 Units and each unit contains 60 slides in it.
Contents…
• Introduction to Web Application Technologies
• Developing a View Component
• Developing a Controller Component
• Developing Dynamic Forms
• Sharing Application Resources Using the Servlet Context
• Designing the Business Tier
• Developing Web Applications Using Struts
• Developing Web Applications Using Session Management
• Using Filters in Web Applications
• Integrating Web Applications With Databases
• Developing JSP™ Pages
• Developing JSP Pages Using Custom Tags
• Developing Web Applications Using Struts Action Forms
• Building Reusable Web Presentation Components
With the future of Flash/Flex uncertain and platform/device ubiquity lost, many companies now have a great opportunity to migrate their Flash applications to HTML5 architectures... without sacrificing their immersive experiences.
Royal Cyber Rational Solution for Power Systems offer developers:
-Common developer desktop across operating systems and languages
-One integrated family of development tools (C/C++, Java, RPG, Cobol)
-Support for multiplatform development (RAD, JAVA Script, RBD, EGL Rich UI)
-Attract new talent to work for power system development
Building a Rich Social Network Applicationgoodfriday
Learn how to build a social networking site using Microsoft Silverlight. See how to mash up existing services, how to tag and store data in back-end services, and how to build a rich and engaging experience.
Seeking an opportunity to use proven skills in an organization that elevates me by exploring skills and working
hard as true to my conscience. For the upliftment of the organization as well as my personal growth
Session presented at the 2nd IndicThreads.com Conference on Cloud Computing held in Pune, India on 3-4 June 2011.
http://CloudComputing.IndicThreads.com
Abstract: Cloud computing is no longer a buzz term but a reality. With a great opportunity for huge financial savings and demand for Software-as-a-Service products, developing products for the cloud is something that cannot be ignored. In this talk, I would like to touch upon 3 key aspects of cloud engineering – scalability, security and flexibility and its impact on application architecture, data processing needs and deployment.
* By Manjusha Madabushi, Co-Founder and CTO of Talentica Software Pvt. Ltd.
Speaker: Manjusha is a Co-Founder and CTO of Talentica Software Pvt. Ltd. She has a Bachelor’s degree from IIT Mumbai and a Master’s degree from Northwestern University, Chicago. She has over 23 years experience working in the IT industry. She started her career working for Amoco Research Centre, USA till 1989 before returning to India and joining TCS. During her 9 year career at TCS, Manjusha worked in different technology areas such as Artificial Intelligence, Application Modeling, Compilers etc. She was also the Engineering head of the TCS’ product – E.X. NGN. Post TCS, she founded Nitman Software, which was acquired by a US based CRM company, eGain Communications in the year 2000. She co-founded Talentica Software, a company that helps technology companies transform their ideas into successful products in 2003. Talentica specializes in building highly scalable products using cutting edge technologies in the areas of Social Analytics, CRM, Natural Language processing and Advertising.
Mihai Tataran - Building web applications with HTML 5 and related technologiesITSpark Community
In today’s world, clients and users are more and more demanding when it comes to the applications they use. Whether we are talking about performance, fluid interface design, or availability on different screen sizes and devices, web applications need all these and even more. During this session we will explore how we can enrich the web user’s experience with technologies like: HTML5, web sockets (and Microsoft’s SignalR), and JavaScript libraries.
With the future of Flash/Flex uncertain and platform/device ubiquity lost, many companies now have a great opportunity to migrate their Flash applications to HTML5 architectures... without sacrificing their immersive experiences.
Royal Cyber Rational Solution for Power Systems offer developers:
-Common developer desktop across operating systems and languages
-One integrated family of development tools (C/C++, Java, RPG, Cobol)
-Support for multiplatform development (RAD, JAVA Script, RBD, EGL Rich UI)
-Attract new talent to work for power system development
Building a Rich Social Network Applicationgoodfriday
Learn how to build a social networking site using Microsoft Silverlight. See how to mash up existing services, how to tag and store data in back-end services, and how to build a rich and engaging experience.
Seeking an opportunity to use proven skills in an organization that elevates me by exploring skills and working
hard as true to my conscience. For the upliftment of the organization as well as my personal growth
Session presented at the 2nd IndicThreads.com Conference on Cloud Computing held in Pune, India on 3-4 June 2011.
http://CloudComputing.IndicThreads.com
Abstract: Cloud computing is no longer a buzz term but a reality. With a great opportunity for huge financial savings and demand for Software-as-a-Service products, developing products for the cloud is something that cannot be ignored. In this talk, I would like to touch upon 3 key aspects of cloud engineering – scalability, security and flexibility and its impact on application architecture, data processing needs and deployment.
* By Manjusha Madabushi, Co-Founder and CTO of Talentica Software Pvt. Ltd.
Speaker: Manjusha is a Co-Founder and CTO of Talentica Software Pvt. Ltd. She has a Bachelor’s degree from IIT Mumbai and a Master’s degree from Northwestern University, Chicago. She has over 23 years experience working in the IT industry. She started her career working for Amoco Research Centre, USA till 1989 before returning to India and joining TCS. During her 9 year career at TCS, Manjusha worked in different technology areas such as Artificial Intelligence, Application Modeling, Compilers etc. She was also the Engineering head of the TCS’ product – E.X. NGN. Post TCS, she founded Nitman Software, which was acquired by a US based CRM company, eGain Communications in the year 2000. She co-founded Talentica Software, a company that helps technology companies transform their ideas into successful products in 2003. Talentica specializes in building highly scalable products using cutting edge technologies in the areas of Social Analytics, CRM, Natural Language processing and Advertising.
Mihai Tataran - Building web applications with HTML 5 and related technologiesITSpark Community
In today’s world, clients and users are more and more demanding when it comes to the applications they use. Whether we are talking about performance, fluid interface design, or availability on different screen sizes and devices, web applications need all these and even more. During this session we will explore how we can enrich the web user’s experience with technologies like: HTML5, web sockets (and Microsoft’s SignalR), and JavaScript libraries.
These are the slides I used on a small presentation that I gave at the company I work for. It contains the definition and information about Single Page Applications, information and details about AngularJS and a small demonstration.
You may find the source code for the demo app here: https://github.com/cezar-carneiro/yoda-converter
The slides have GIFs, but GIFs don't seem to work on slideshare.
Zukunftssichere Anwendungen mit AngularJS 1.x entwickeln (GDG DevFest Karlsru...Christian Janz
Seit der Ankündigung von Angular 2 fragen sich viele Entwickler, wie der Migrationspfad für Angular 1.x Anwendungen aussieht. Da Angular 2 noch nicht für produktive Anwendungen eingesetzt werden kann, stellt sich vor allem die Frage, wie man bei der Entwicklung neuer Anwendungen mit Angular 1.x vorgehen sollte, damit die Migration später möglichst einfach wird. Diese Session liefert Antworten hierauf.
Vorgestellt werden u.a. der Einsatz von EcmaScript 2015 Modulen, TypeScript und Patterns für Komponenten und Services. Abschließend gibt es noch einen Ausblick auf Ideen und Strategien für die schrittweise Migration von bestehenden Anwendungen nach Angular 2.
Tarot decks, tea leaves, scrying, or your crazy uncle's trick knee; all popular ways to predict the future. When it comes to the every-changing realm of UI and UX on the web, the best way to know the future is to keep up-to-date with the latest technologies and techniques. Instead of having to read about it, you will be creating the new trends and standards.
MivaCon 2016, Thursday session 3.
Case Study: Produktkonfigurator Web-AppFLYACTS GmbH
Mit Produktkonfiguratoren nehmen die Kunden Einfluss auf ihr Produkt und werden Teil des Entstehungsprozesses. Die folgende Case STudy beschriebt, wie wir mittels Webtechnologien und dem Framework AngularJS einen Konfigurator für einen Gartenhaus-Produzenten umsetzten
HTML5 and the dawn of rich mobile web applicationsJames Pearce
HTML5 and its related technologies are enabling new ways to build beautiful sites and applications for contemporary mobile devices. Native mobile developers can now use web technologies to surmount cross-platform headaches, and desktop web developers can reach mobile users in familiar, app-like ways. This session explores the state of the art in HTML5-based mobile web frameworks, and demonstrates the practical possibilities that this powerful and standards-based approach can bring.
Building modern web sites with ASP .Net Web API, WebSockets and RSignalAlessandro Pilotti
My session at ITCamp.ro 2012:
Web site development is an ever changing landscape. Thanks to the latest web browser technologies it's possible to create highly responsive single page applications, requiring a new approach to design and development on the server side. During this session we'll see ho to use .Net technologies to get the best out of the new Web API, WebSockets and the excellent RSignal framework.
Top 12 Front End Technologies to Use In 2023.pdfLaura Miller
Front end technologies are used to create highly interactive web pages and applications. Read the blog to know the best examples and their key benefits.
I have over 5 years of experience working in IT industry. Currently, I was working as Envision's Senior Maximo Techinical Consultant,
Techinical Design of our client's requirements. Implementation and Development of EAM solution which suits exactly
our client's business processes. I was enhancing techincal capabilities regularly oneway or another.
What are the advantages of choosing React Js for the creation of a website.pdfCuion Technologies
Developing a website uses various programming languages for designing, animating, and adding content, etc. Now let's learn some advantages of having a react JS website.
Top 12 Front End Technologies to Use In 2024.pdfLaura Miller
Front end technologies are used to create highly interactive web pages and applications. Read the blog to know the best examples and their key benefits.
Architecting for Scalable and Usable Web Applications
As Enterprises and Software Vendors start to develop more and more applications on the Internet there is an increasing importance to architect these applications for both growth and for the optimal user experience. Software + Services allows you to develop fantastic applications, but there are pitfalls with architecting the applications in the wrong way.
Our Central Region Architect Evangelists will lead us through two great discussions on scaling web applications and creating the best possible user experience.
Session 1: Architecting for Scalable Web Applications In this session we will explore the patterns that typical applications follow as their scalability needs grow due to increased demand. We will also discuss best practices from companies that have gone up the scalability curve like Amazon.com, MySpace and Flickr. We will discuss the common bottlenecks that prevent scalability as well as how to tackle tough issues like state management in a application that is scaled across servers and even data centers. We will also discuss the “scale later” philosophy and how it should be accompanied by a solid plan to scale your applications.
Session 2: Architecting for Usable Web Applications In this session we will discuss how to architect your application with the user in mind. We have more choices than ever before for developing applications (Traditional Web Apps, AJAX, RIA technologies like Flex and Microsoft Silverlight and even smart clients) and picking the technology is only part of the solution. The architecture of the application must be designed correctly to provide a pleasing user experience and (potentially) to add new and interesting clients in the future.
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.
PHP Frameworks: I want to break free (IPC Berlin 2024)Ralf Eggert
In this presentation, we examine the challenges and limitations of relying too heavily on PHP frameworks in web development. We discuss the history of PHP and its frameworks to understand how this dependence has evolved. The focus will be on providing concrete tips and strategies to reduce reliance on these frameworks, based on real-world examples and practical considerations. The goal is to equip developers with the skills and knowledge to create more flexible and future-proof web applications. We'll explore the importance of maintaining autonomy in a rapidly changing tech landscape and how to make informed decisions in PHP development.
This talk is aimed at encouraging a more independent approach to using PHP frameworks, moving towards a more flexible and future-proof approach to PHP development.
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.
Pushing the limits of ePRTC: 100ns holdover for 100 daysAdtran
At WSTS 2024, Alon Stern explored the topic of parametric holdover and explained how recent research findings can be implemented in real-world PNT networks to achieve 100 nanoseconds of accuracy for up to 100 days.
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
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.
Removing Uninteresting Bytes in Software FuzzingAftab Hussain
Imagine a world where software fuzzing, the process of mutating bytes in test seeds to uncover hidden and erroneous program behaviors, becomes faster and more effective. A lot depends on the initial seeds, which can significantly dictate the trajectory of a fuzzing campaign, particularly in terms of how long it takes to uncover interesting behaviour in your code. We introduce DIAR, a technique designed to speedup fuzzing campaigns by pinpointing and eliminating those uninteresting bytes in the seeds. Picture this: instead of wasting valuable resources on meaningless mutations in large, bloated seeds, DIAR removes the unnecessary bytes, streamlining the entire process.
In this work, we equipped AFL, a popular fuzzer, with DIAR and examined two critical Linux libraries -- Libxml's xmllint, a tool for parsing xml documents, and Binutil's readelf, an essential debugging and security analysis command-line tool used to display detailed information about ELF (Executable and Linkable Format). Our preliminary results show that AFL+DIAR does not only discover new paths more quickly but also achieves higher coverage overall. This work thus showcases how starting with lean and optimized seeds can lead to faster, more comprehensive fuzzing campaigns -- and DIAR helps you find such seeds.
- These are slides of the talk given at IEEE International Conference on Software Testing Verification and Validation Workshop, ICSTW 2022.
UiPath Test Automation using UiPath Test Suite series, part 5DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 5. In this session, we will cover CI/CD with devops.
Topics covered:
CI/CD with in UiPath
End-to-end overview of CI/CD pipeline with Azure devops
Speaker:
Lyndsey Byblow, Test Suite Sales Engineer @ UiPath, Inc.
Essentials of Automations: The Art of Triggers and Actions in FMESafe Software
In this second installment of our Essentials of Automations webinar series, we’ll explore the landscape of triggers and actions, guiding you through the nuances of authoring and adapting workspaces for seamless automations. Gain an understanding of the full spectrum of triggers and actions available in FME, empowering you to enhance your workspaces for efficient automation.
We’ll kick things off by showcasing the most commonly used event-based triggers, introducing you to various automation workflows like manual triggers, schedules, directory watchers, and more. Plus, see how these elements play out in real scenarios.
Whether you’re tweaking your current setup or building from the ground up, this session will arm you with the tools and insights needed to transform your FME usage into a powerhouse of productivity. Join us to discover effective strategies that simplify complex processes, enhancing your productivity and transforming your data management practices with FME. Let’s turn complexity into clarity and make your workspaces work wonders!
A tale of scale & speed: How the US Navy is enabling software delivery from l...sonjaschweigert1
Rapid and secure feature delivery is a goal across every application team and every branch of the DoD. The Navy’s DevSecOps platform, Party Barge, has achieved:
- Reduction in onboarding time from 5 weeks to 1 day
- Improved developer experience and productivity through actionable findings and reduction of false positives
- Maintenance of superior security standards and inherent policy enforcement with Authorization to Operate (ATO)
Development teams can ship efficiently and ensure applications are cyber ready for Navy Authorizing Officials (AOs). In this webinar, Sigma Defense and Anchore will give attendees a look behind the scenes and demo secure pipeline automation and security artifacts that speed up application ATO and time to production.
We will cover:
- How to remove silos in DevSecOps
- How to build efficient development pipeline roles and component templates
- How to deliver security artifacts that matter for ATO’s (SBOMs, vulnerability reports, and policy evidence)
- How to streamline operations with automated policy checks on container images
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdfPeter Spielvogel
Building better applications for business users with SAP Fiori.
• What is SAP Fiori and why it matters to you
• How a better user experience drives measurable business benefits
• How to get started with SAP Fiori today
• How SAP Fiori elements accelerates application development
• How SAP Build Code includes SAP Fiori tools and other generative artificial intelligence capabilities
• How SAP Fiori paves the way for using AI in SAP apps
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...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.
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...Neo4j
Leonard Jayamohan, Partner & Generative AI Lead, Deloitte
This keynote will reveal how Deloitte leverages Neo4j’s graph power for groundbreaking digital twin solutions, achieving a staggering 100x performance boost. Discover the essential role knowledge graphs play in successful generative AI implementations. Plus, get an exclusive look at an innovative Neo4j + Generative AI solution Deloitte is developing in-house.
Elizabeth Buie - Older adults: Are we really designing for our future selves?
Building single page, modular html5 applications for PC and Mobile
1. Building single page, modular
HTML5 applications for PC
and Mobile
Lorant Domokos
Microsoft Student Partners
Fortech
@ itcampro # itcamp12 Premium conference on Microsoft technologies
2. Mobile &
ITCamp 2012 sponsors Development
@ itcampro # itcamp12 Premium conference on Microsoft technologies
3. Mobile &
Agenda Development
• What are Single Page Applications?
• Architecture
• Technologies
• Knockout fundamentals
• Navigation fundamentals
• Services layer
• Patterns for modular JavaScript code
@ itcampro # itcamp12 Premium conference on Microsoft technologies
4. Mobile &
Spectrum of Web Apps Development
• Static: consist of static HTML pages, CSS, and
images, full page refresh, page does not
change
• Server Rendered: server dynamically
assembles page, JavaScript for validation,
hover, full page refresh
@ itcampro # itcamp12 Premium conference on Microsoft technologies
5. Mobile &
Spectrum of Web Apps Development
• Hybrid Design: similar to server-rendered, but
relies heavily on client side Java-Script to deliver
an engaging experience.
– Islands of richness: islands of interactivity within the
site that do not require full-page reloads to change
the UI
• Single-page Interface: In this model, a full-page
load happens only once. Ex: Hotmail, Office Live.
• Bani Pierduti is hybrid
@ itcampro # itcamp12 Premium conference on Microsoft technologies
6. Mobile &
Modern Web Applications Development
• They are standards-focused, no plugins
• They are interactive
• They limit full-page reloads
• They are asynchronous
• They manage data
• Runs on any device
• Can work offline
@ itcampro # itcamp12 Premium conference on Microsoft technologies
7. Mobile &
Keep user is context Development
• No page reload
• Users are kept in context
• Fluid experience as they navigate from one
task to another
• Result: great user experience
@ itcampro # itcamp12 Premium conference on Microsoft technologies
8. Mobile &
Single Page Applications Development
Rich responsive applications combining the
best of the web and desktop, build with HTML5
and JavaScript
@ itcampro # itcamp12 Premium conference on Microsoft technologies
9. Mobile &
Architecture Development
Server Client
ASP.NET Rendered Page
HTML/CSS/JS HTML/CSS
@ itcampro # itcamp12 Premium conference on Microsoft technologies
10. Mobile &
Architecture Development
Server Client
ASP.NET Rendered Page
HTML/CSS/JS HTML/CSS
JavaScript Client
Side Interaction
@ itcampro # itcamp12 Premium conference on Microsoft technologies
11. Mobile &
Architecture Development
Server Client
ASP.NET Rendered Page
HTML/CSS/JS HTML/CSS
Data Service JavaScript Client
JSON/XML Side Interaction
JavaScript Client
Side Interaction
@ itcampro # itcamp12 Premium conference on Microsoft technologies
12. Mobile &
Architecture Development
Server Client
ASP.NET Rendered Page
HTML/CSS/JS HTML/CSS
Data Service JavaScript Client
JSON/XML Side Interaction Nav
JavaScript Client
Side Interaction
@ itcampro # itcamp12 Premium conference on Microsoft technologies
13. Mobile &
Architecture Development
Server Client
ASP.NET Rendered Page
HTML/CSS/JS HTML/CSS
Data Service JavaScript Client
JSON/XML Side Interaction Nav
JavaScript Client
Side Interaction
@ itcampro # itcamp12 Premium conference on Microsoft technologies
14. Mobile &
Architecture Development
Server Client
ASP.NET Rendered Page
HTML/CSS/JS HTML/CSS
Data Service JavaScript Client
JSON/XML Side Interaction Nav
JavaScript Client
Side Interaction
Local Storage
@ itcampro # itcamp12 Premium conference on Microsoft technologies
15. Mobile &
Development
DEMO MVC 4 SPA
@ itcampro # itcamp12 Premium conference on Microsoft technologies
16. Mobile &
Bani Pierduti Development
@ itcampro # itcamp12 Premium conference on Microsoft technologies
17. Mobile &
Technologies Development
Server Client
ASP.NET Rendered Page
HTML/CSS/JS HTML/CSS
Data Service JavaScript Client
JSON/XML Side Interaction Nav
WebAPI
Node.js
JavaScript Client
Side Interaction
Local Storage
@ itcampro # itcamp12 Premium conference on Microsoft technologies
18. Mobile &
Technologies Development
Server Client
ASP.NET Rendered Page
HTML/CSS/JS HTML/CSS
Data Service JavaScript Client
JSON/XML Side Interaction Nav
WebAPI
Node.js
JavaScript Client
Side Interaction
Local Storage HTML5
@ itcampro # itcamp12 Premium conference on Microsoft technologies
19. Mobile &
Technologies Development
Server Client
ASP.NET Rendered Page
HTML/CSS/JS HTML/CSS
Data Service JavaScript Client
JSON/XML Side Interaction Nav
WebAPI
Node.js
JavaScript Client
Side Interaction
Upshot.js?
Amplify.js
Local Storage HTML5
@ itcampro # itcamp12 Premium conference on Microsoft technologies
20. Mobile &
Technologies Development
Server Client
ASP.NET Rendered Page
HTML/CSS/JS HTML/CSS
Nav.js?
History.js
Data Service JavaScript Client
JSON/XML Side Interaction Nav
WebAPI
Node.js
JavaScript Client
Side Interaction
Upshot.js?
Amplify.js
Local Storage HTML5
@ itcampro # itcamp12 Premium conference on Microsoft technologies
21. Mobile &
Technologies Development
Server Client Knockout.js
Backbone.js
ASP.NET Rendered Page JsRender
HTML/CSS/JS HTML/CSS
Nav.js?
History.js
Data Service JavaScript Client
JSON/XML Side Interaction Nav
WebAPI
Node.js
JavaScript Client
Side Interaction
Upshot.js?
Amplify.js
Local Storage HTML5
@ itcampro # itcamp12 Premium conference on Microsoft technologies
22. Mobile &
Knockout Development
• JavaScript MVVM Framework
• MVVM-Model-View-ViewModel
– Model-business domain objects
– View-visible UI
– ViewModel-data/operations on UI
@ itcampro # itcamp12 Premium conference on Microsoft technologies
23. Mobile &
Knockout Development
• Declarative data bindings, two way
• Automatic UI refresh
• Dependency tracking, if one object changes
all dependent objects change
• Templating
@ itcampro # itcamp12 Premium conference on Microsoft technologies
24. Mobile &
Observables Development
• They are functions
• Bindings observe observables
• Declare: var p = ko.observable();
• Read: var r = p();
• Write: p(„value‟);
@ itcampro # itcamp12 Premium conference on Microsoft technologies
25. Mobile &
Observables Development
• Types:
– Observable: ko.observable(„value‟)
– Observable array: ko.observableArray([])
– Computed:
ko.computed(function() {
return vm.firstName() + „ ‟ + vm.lastName();
}, vm)
@ itcampro # itcamp12 Premium conference on Microsoft technologies
26. Mobile &
Bindings Development
• Built in:
– Text and Appearance
– Forms
– Control Flow
– Templates
• Custom bindings
@ itcampro # itcamp12 Premium conference on Microsoft technologies
27. Mobile &
Text and Appearance Development
• Visible-toggle visibility
• Text-text value of DOM element
• Html-raw HTML of DOM element
• Css-css classes
• Style-raw style attributes
• Attr-any attribute of DOM element
@ itcampro # itcamp12 Premium conference on Microsoft technologies
28. Mobile &
Forms Development
• Click-click event handling
• Event-handling any event of DOM element
• Submit-invoked when form is submitted
• Enable-set as enabled
• Disable-set as disabled
• Value-value of DOM element
• Checked-checkbox, radio button
• Etc.
@ itcampro # itcamp12 Premium conference on Microsoft technologies
29. Mobile &
Control Flow Development
• If-executed if condition is true
• Ifnot-executes if condition is false
• Foreach-executes for each item in collection
– $index
– $data
• With-Executes for the specified child object
@ itcampro # itcamp12 Premium conference on Microsoft technologies
30. Mobile &
Templates Development
• JavaScript templates-traditional JavaScript
template in <script> tag
• Containerless control flow: template-less,
comment based syntax
@ itcampro # itcamp12 Premium conference on Microsoft technologies
31. Mobile &
Navigation and Browser History Development
• Traditional: browser manages history, back
and forward buttons
• URLs can contain a fragment identifier (hash)
– This is the part after the # sign
• Fragment identifier may also contain name
value pairs
@ itcampro # itcamp12 Premium conference on Microsoft technologies
32. Mobile &
Navigation and Browser History Development
• If only the fragment identifier changes the
browser doesn‟t do a page refresh
• They are also not added to history
automatically
• Fragment identifies can be used to manage
screen layout
• Application can handle HTML 5 hashchange
event
@ itcampro # itcamp12 Premium conference on Microsoft technologies
33. Mobile &
Upshot.js Development
• “Proxy” on client side
• Retrieves data from service
• Paging
• Tracks changes
• Offline
• Is it ready?
@ itcampro # itcamp12 Premium conference on Microsoft technologies
34. Mobile &
Amplify.js Development
• Set of components designed to solve
common web application problems with a
simplistic API
• Request management: provides a clean and
elegant request abstraction
• Client Side Browser & Mobile Device Storage:
HTML5 LocalStorage on modern browsers
• Client Side Component Communication:
pub/sub component to component
communication
@ itcampro # itcamp12 Premium conference on Microsoft technologies
35. Mobile &
WebAPI Development
Alessandro Pilotti already demonstrated
@ itcampro # itcamp12 Premium conference on Microsoft technologies
36. Mobile &
Modularity Development
• Patterns are recommended for separation of
concerns, encapsulation, abstraction, etc
• Namespaces: var bp = bp || {};
• Structuring patterns
• Promise and Deferred patterns for handling
asynchrony
• Advanced(Not discussed here):
– Publish/Subscribe for module communication
– Asynchronous module definitions
– jQuery Widgets, Plugins
@ itcampro # itcamp12 Premium conference on Microsoft technologies
37. Mobile &
JavaScript structuring patterns Development
• Prototype pattern
• Module pattern
• Revealing module pattern
• Revealing prototype pattern
@ itcampro # itcamp12 Premium conference on Microsoft technologies
38. Mobile &
Prototype pattern Development
var Calculator = function(element) {
this.eqControl = $(element);
}
Calculator.prototype = {
add: function(x, y) {
var val = x + y;
this.eqControl.text(val);
}
}
@ itcampro # itcamp12 Premium conference on Microsoft technologies
39. Mobile &
Prototype pattern Development
• Pros:
– JS built in features
– Modularize code into reusable objects
– Variables/functions taken out of global
namespace
– Functions loaded into memory once
– Can “override” functions
• Cons:
– “this” can be tricky
– Contstructor separate from prototype definition
@ itcampro # itcamp12 Premium conference on Microsoft technologies
40. Mobile &
Module pattern Development
var Calculator = function(element) {
// Private member.
this.eqControl = $(element);
return {
// Public interface.
add: function(x, y) {
var val = x + y;
this.eqControl.text(val);
}
};
}
@ itcampro # itcamp12 Premium conference on Microsoft technologies
41. Mobile &
Module pattern Development
• Pros:
– Modularize code into reusable objects
– Variables/functions taken out of global
namespace
– Expose only public members, hide private
• Cons:
– Functions will be duplicated for each instance
– Not easy to extend
@ itcampro # itcamp12 Premium conference on Microsoft technologies
42. Mobile &
Revealing Module pattern Development
var Calculator = function(element) {
// Private members.
var
eqControl = $(element),
add: function(x, y) {
var val = x + y;
this.eqControl.text(val);
};
return {
// Public interface.
doAdd: add
};
}
@ itcampro # itcamp12 Premium conference on Microsoft technologies
43. Mobile &
Revealing Module pattern Development
• Pros:
– Modularize code into reusable objects
– Variables/functions taken out of global
namespace
– Expose only public members, hide private
– Cleaner way to expose public members
• Cons:
– Functions will be duplicated for each instance
– Not easy to extend
@ itcampro # itcamp12 Premium conference on Microsoft technologies
44. Mobile &
Revealing Prototype pattern Development
var Calculator = function(element) {
this.eqControl = $(element);
}
Calculator.prototype = function() {
var add = function(x, y) {
var val = x + y;
this.eqControl.text(val);
};
return {
doAdd: add
};
}
@ itcampro # itcamp12 Premium conference on Microsoft technologies
45. Mobile &
Revealing Module pattern Development
• Pros:
– Combines Prototype and Revealing Module
patterns
– Modularize code into reusable objects
– Variables/functions taken out of global
namespace
– Functions loaded into memory once
– Can “override” functions
• Cons:
– “this” can be tricky
– Contstructor separate from prototype definition
@ itcampro # itcamp12 Premium conference on Microsoft technologies
46. Mobile &
Promise pattern Development
• JavaScript requests/operations are
asynchronous:
– Ajax
– Animations
– Etc.
• How do we link operations if we have
dependencies?
@ itcampro # itcamp12 Premium conference on Microsoft technologies
47. Mobile &
Promise pattern Development
• jQuery.Deferred public API
• defferred.done()
• defferred.fail()
• defferred.then()
• defferred.resolve()
• defferred.reject()
• jQuery.when()
@ itcampro # itcamp12 Premium conference on Microsoft technologies
48. Q&A
@ itcampro # itcamp12 Premium conference on Microsoft technologies
Editor's Notes
- They are standards-focused. To have the broadest reach across multiple platforms and devices, applications attempt to implement the current and evolving standards and adopt future standards once ratified.- They are interactive. Modern web applications keep the user engaged by providing constant feedback on their actions. This feedback can come in the form of messages, animations to hide or show elements, mouse-over effects, drag and drop feedback, the automatic refreshing of screen data, animation of various elements, or the implementation of fade-in or fade-out effects. Interactive applications leverage the fast JavaScript engines in modern browsers to perform their client-side tasks.- They limit full-page reloads. Modern web applications seek to limit the number of full page reloads. Reloads are much slower than a localized Ajax call to update a portion of the UI. Full-page reloads also limit the ability to animate state or page changes. By not performing a full-page reload, users can be kept in context, providing a fluid experience as they navigate from one task to another.- They are asynchronous. Modern web applications use Ajax to dynamically load data, page fragments, or other assets instead of performing a full-page reload to acquire data or HTML content. Because the loading of data is asynchronous, the UI is able to stay responsive and keep the user informed while the data request is being fulfilled. This asynchronous on-demand loading also reduces application response time because requests can be tuned to return only the data and other content that needs to change.- They manage data. When applicable, modern web applications provide client-side data caching and pre-fetching to boost client-side performance. This enables the UI to immediately respond to user input gestures because it does not have to make a call to the server for data. Data caching also serves to minimize the impact on server resources, increasing application scalability because fewer calls to the server are required.