This document discusses migrating from Angular 1 to Angular 2. It provides an overview of Angular 2 including its modular and component-based architecture. It also discusses TypeScript and how it is used with Angular 2. The document then walks through migrating a sample Silverlight application to an equivalent Angular 2 application, covering converting the viewmodel to a component and porting the view. It emphasizes keeping a similar MVVM pattern and discusses new Angular 2 concepts like templates, metadata and bindings.
Migrating an Application from Angular 1 to Angular 2 Ross Dederer
Migrating Angular 1 to Angular 2: I can summarize my experience in migration in one phrase: Angular 1 and Angular 2 are very different. To help navigate through these differences, I have chosen an existing Angular 1 application and ported it over to Angular 2. This is not any old existing application but an application that has been around for almost a decade originally developed my Microsoft in Silverlight.
I will walk you through the steps of migration as well as sharing insights and problems I faced along the way. Additionally, with Google recommending developers use TypeScript, I will walk you through core concepts such as type safety, encapsulation, and MVVM development patterns. You will find side by side code comparisons for each topic.
About me : As a Developer Relations Engineer at ComponentOne, a division of GrapeCity, Ross Dederer has spent his entire professional life helping others navigate the complex technology environment. Ross works closely with clients and developer teams to provide solutions that impact software development experiences. Traveling to code camps, conferences and meeting with corporate clients, Ross is able to pursue his passion of helping the community grow.
Presented at FITC Toronto 2016
See details at www.fitc.ca
AngularJS was originally created in 2009 as an end-to-end solution for web designers wanting to build simple web apps. Over the last 6 years it has evolved into a component based MVC framework targeted at JavaScript developers. To maintain backward compatibility, Angular has had to hold onto many deprecated concepts. This has caused some of Angular’s APIs to be complex and easy to misuse. Angular 2 is a complete rewrite of Angular 1 which eliminates the outdated concepts and takes full advantage of modern web standards like ES6, TypeScript, and Web Components.
In this session you’ll learn which Angular 1 features to avoid and how to write an Angular 1 app that will be easy to migrate into Angular 2. We’ll go through the process of refactoring an Angular 1 app to prep it for migration. Then Rob will demonstrate how to incrementally migrate to Angular 2. You’ll come away from this session with a better understanding of what Angular 2 has to offer and how to start taking advantage of it.
Objective
To make the migration from Angular 1 to Angular 2 as painless as possible
Target Audience
Anyone using Angular 1 or interested in learning Angular 2.
Assumed Audience Knowledge
Some experience with JavaScript and Angular 1
Five Things Audience Members Will Learn
How to write an Angular 1 app that will be easy to migrate
Using TypeScript, ES6 modules, and the component router with Angular 1
The benefits of Angular 2
How to run Angular 1 and 2 in the same app
How to migrate an Angular 1 app to Angular 2
Building Universal Applications with Angular 2Minko Gechev
Angular is one of the most popular frameworks for the development of Single-Page Applications (SPA). Recently Google announced its second major version, which brings some brand new ideas and improvements. For instance, Angular 2 is written in TypeScript, has much faster change detection and allows development of universal (isomorphic) applications.
In this talk we're going to introduce the motivation behind the new design decisions and the improvements in Angular 2. We'll take a look at the building blocks the framework provides for the development of professional single-page applications.
Probabilmente il framework javascript più atteso di sempre, evoluzione di uno dei framework più longevi ed usati nello sviluppo front end. Si vedranno alcune delle novità introdotte e delle scelte radicali fatte da Google per la nuova versione di Angular
Slide deck presented during my session on "Introduction to Angular 2" at UNICOM DevCon 2016 conference on Thursday, Dec 1, 2016. The conference was at Mövenpick Hotel & Spa, Bengaluru.
Migrating an Application from Angular 1 to Angular 2 Ross Dederer
Migrating Angular 1 to Angular 2: I can summarize my experience in migration in one phrase: Angular 1 and Angular 2 are very different. To help navigate through these differences, I have chosen an existing Angular 1 application and ported it over to Angular 2. This is not any old existing application but an application that has been around for almost a decade originally developed my Microsoft in Silverlight.
I will walk you through the steps of migration as well as sharing insights and problems I faced along the way. Additionally, with Google recommending developers use TypeScript, I will walk you through core concepts such as type safety, encapsulation, and MVVM development patterns. You will find side by side code comparisons for each topic.
About me : As a Developer Relations Engineer at ComponentOne, a division of GrapeCity, Ross Dederer has spent his entire professional life helping others navigate the complex technology environment. Ross works closely with clients and developer teams to provide solutions that impact software development experiences. Traveling to code camps, conferences and meeting with corporate clients, Ross is able to pursue his passion of helping the community grow.
Presented at FITC Toronto 2016
See details at www.fitc.ca
AngularJS was originally created in 2009 as an end-to-end solution for web designers wanting to build simple web apps. Over the last 6 years it has evolved into a component based MVC framework targeted at JavaScript developers. To maintain backward compatibility, Angular has had to hold onto many deprecated concepts. This has caused some of Angular’s APIs to be complex and easy to misuse. Angular 2 is a complete rewrite of Angular 1 which eliminates the outdated concepts and takes full advantage of modern web standards like ES6, TypeScript, and Web Components.
In this session you’ll learn which Angular 1 features to avoid and how to write an Angular 1 app that will be easy to migrate into Angular 2. We’ll go through the process of refactoring an Angular 1 app to prep it for migration. Then Rob will demonstrate how to incrementally migrate to Angular 2. You’ll come away from this session with a better understanding of what Angular 2 has to offer and how to start taking advantage of it.
Objective
To make the migration from Angular 1 to Angular 2 as painless as possible
Target Audience
Anyone using Angular 1 or interested in learning Angular 2.
Assumed Audience Knowledge
Some experience with JavaScript and Angular 1
Five Things Audience Members Will Learn
How to write an Angular 1 app that will be easy to migrate
Using TypeScript, ES6 modules, and the component router with Angular 1
The benefits of Angular 2
How to run Angular 1 and 2 in the same app
How to migrate an Angular 1 app to Angular 2
Building Universal Applications with Angular 2Minko Gechev
Angular is one of the most popular frameworks for the development of Single-Page Applications (SPA). Recently Google announced its second major version, which brings some brand new ideas and improvements. For instance, Angular 2 is written in TypeScript, has much faster change detection and allows development of universal (isomorphic) applications.
In this talk we're going to introduce the motivation behind the new design decisions and the improvements in Angular 2. We'll take a look at the building blocks the framework provides for the development of professional single-page applications.
Probabilmente il framework javascript più atteso di sempre, evoluzione di uno dei framework più longevi ed usati nello sviluppo front end. Si vedranno alcune delle novità introdotte e delle scelte radicali fatte da Google per la nuova versione di Angular
Slide deck presented during my session on "Introduction to Angular 2" at UNICOM DevCon 2016 conference on Thursday, Dec 1, 2016. The conference was at Mövenpick Hotel & Spa, Bengaluru.
AngularJS 1.3 is by far the best version of Angular available today. It was just released a few weeks ago. It's chock full of bug fixes, feature enhancements and performance improvements.
YouTube link: - https://youtu.be/bghVyCbxj6g
This presentation is dedicated to studying the fundamentals of Angular 2.
To follow along with the presentation, watch this 3-part YouTube Series here: http://bit.ly/2mnLZNz
You can also download Traversy's Spotify App here: http://bit.ly/2m1TxI3
"Angular 2: core concepts" by Fabio Biondi, Matteo Ronchi.
Angular 2 risolve problematiche e lacune della precedente versione, prestando particolare attenzione alle performance, al supporto mobile e alla qualità e leggibilità del codice prodotto. In questo talk verranno illustrate le funzionalità più significative tra cui: - nuova architettura totalmente orientata ai componenti - rimozione di $scope e del dirty checking ($digest) - adozione di un flow unidirezionale - utilizzo di Typescript, ES6 o ES5 - completa rivisitazione del motore di Dependency Injection - nuove procedure per il bootstrap dell’applicazione.
The evolution of Angular 2 @ AngularJS Munich Meetup #5Johannes Weber
The evolution of Angular 2
Angular 1 was born in 2009. Since that a lot of web standards are born and supported by most of the browsers natively. So it's time to use the new possibilities. That's how Angular 2 started. It's not just a major update. It's a whole rewrite!
The key theme of this talk it to get an overview of Angular 2. I’ll walk you through what you need to know to stay up to date, explain the main concepts behind A2 and the current state.
It is rounded off with some practical suggestions on how to proceed today - to make the transition from Angular 1.x to Angular 2.x easier.
Original slides with animated gifs can be found here: https://docs.google.com/presentation/d/122ptcLESkfSw8omK9ekG8FksD_zvegGrqOL2GR5PE80/edit?usp=sharing
What is the difference between Angular 1 and Angular 2.
Content:
Where Angular 1.x is going?
Angular 2 - motivations and themes
Open-source culture in Angular team
This presentation has been prepared by Oleksii Prohonnyi for internal Angular.js training to improve skills of newbies in JS/Angular.
Part 1 (Introduction): http://www.slideshare.net/oprohonnyi/dive-into-angular-part-1-introduction
Part 2 (Architecture): http://www.slideshare.net/oprohonnyi/dive-into-angular-part-2-architecture
Part 3 (Performance): http://www.slideshare.net/oprohonnyi/dive-into-angular-part-3-performance
Part 5 (Experience): https://www.slideshare.net/oprohonnyi/dive-into-angular-part-5-experience
Learn all the essentials of building Angular 2 applications right here.
https://www.udemy.com/angular-2-training/?couponCode=UANGULAR2
This is a beginner level course aimed at those new to Angular 2 and Typescript. No previous knowledge of either is required before starting this course.
This course combines slides, projects and quizzes in a clear, concise and engaging way to guide you through the core concepts of Angular 2 and Typescript.
You will gain a solid foundation for building real-world applications following best practices and the Angular 2 style guide. This includes how to build components, create shared services, navigate between views, manage data, and managing user and system events.
Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016Codemotion
Angular 2 is a complete rewrite of the AngularJS framework, which introduces new approaches and leverages the latest technologies. Simplifying and generalizing core concepts, the performance is improved and the range of capabilities is broadened. In this session Shmuela will help you understand the core concepts of Angular 2 apps: the component-based architecture, dependency injection, change detection, and more.
"Angular 2 : le réveil de la force" est un talk co-présenté par Grégory HOULLIER et Nicolas PENNEC, lors du BreizhCamp 2015 à Rennes (France).
Cette présentation a pour but de faire le point sur les nouveautés du framework AngularJS 2.
http://www.breizhcamp.org/
Introduction to Angular for .NET DevelopersLaurent Duveau
Technical presentation given by Laurent Duveau at the Ottawa IT Community meetup on January 10, 2017.
https://www.meetup.com/ottawaitcommunity/events/235519260/
Slides from my latest talk (and videos) about Angular dependency
injection, You can find related videos here: https://www.youtube.com/playlist?list=PLfZsWIHsTcftJl7WlidsXSBAHBXQBR4j2
AngularJS 1.3 is by far the best version of Angular available today. It was just released a few weeks ago. It's chock full of bug fixes, feature enhancements and performance improvements.
YouTube link: - https://youtu.be/bghVyCbxj6g
This presentation is dedicated to studying the fundamentals of Angular 2.
To follow along with the presentation, watch this 3-part YouTube Series here: http://bit.ly/2mnLZNz
You can also download Traversy's Spotify App here: http://bit.ly/2m1TxI3
"Angular 2: core concepts" by Fabio Biondi, Matteo Ronchi.
Angular 2 risolve problematiche e lacune della precedente versione, prestando particolare attenzione alle performance, al supporto mobile e alla qualità e leggibilità del codice prodotto. In questo talk verranno illustrate le funzionalità più significative tra cui: - nuova architettura totalmente orientata ai componenti - rimozione di $scope e del dirty checking ($digest) - adozione di un flow unidirezionale - utilizzo di Typescript, ES6 o ES5 - completa rivisitazione del motore di Dependency Injection - nuove procedure per il bootstrap dell’applicazione.
The evolution of Angular 2 @ AngularJS Munich Meetup #5Johannes Weber
The evolution of Angular 2
Angular 1 was born in 2009. Since that a lot of web standards are born and supported by most of the browsers natively. So it's time to use the new possibilities. That's how Angular 2 started. It's not just a major update. It's a whole rewrite!
The key theme of this talk it to get an overview of Angular 2. I’ll walk you through what you need to know to stay up to date, explain the main concepts behind A2 and the current state.
It is rounded off with some practical suggestions on how to proceed today - to make the transition from Angular 1.x to Angular 2.x easier.
Original slides with animated gifs can be found here: https://docs.google.com/presentation/d/122ptcLESkfSw8omK9ekG8FksD_zvegGrqOL2GR5PE80/edit?usp=sharing
What is the difference between Angular 1 and Angular 2.
Content:
Where Angular 1.x is going?
Angular 2 - motivations and themes
Open-source culture in Angular team
This presentation has been prepared by Oleksii Prohonnyi for internal Angular.js training to improve skills of newbies in JS/Angular.
Part 1 (Introduction): http://www.slideshare.net/oprohonnyi/dive-into-angular-part-1-introduction
Part 2 (Architecture): http://www.slideshare.net/oprohonnyi/dive-into-angular-part-2-architecture
Part 3 (Performance): http://www.slideshare.net/oprohonnyi/dive-into-angular-part-3-performance
Part 5 (Experience): https://www.slideshare.net/oprohonnyi/dive-into-angular-part-5-experience
Learn all the essentials of building Angular 2 applications right here.
https://www.udemy.com/angular-2-training/?couponCode=UANGULAR2
This is a beginner level course aimed at those new to Angular 2 and Typescript. No previous knowledge of either is required before starting this course.
This course combines slides, projects and quizzes in a clear, concise and engaging way to guide you through the core concepts of Angular 2 and Typescript.
You will gain a solid foundation for building real-world applications following best practices and the Angular 2 style guide. This includes how to build components, create shared services, navigate between views, manage data, and managing user and system events.
Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016Codemotion
Angular 2 is a complete rewrite of the AngularJS framework, which introduces new approaches and leverages the latest technologies. Simplifying and generalizing core concepts, the performance is improved and the range of capabilities is broadened. In this session Shmuela will help you understand the core concepts of Angular 2 apps: the component-based architecture, dependency injection, change detection, and more.
"Angular 2 : le réveil de la force" est un talk co-présenté par Grégory HOULLIER et Nicolas PENNEC, lors du BreizhCamp 2015 à Rennes (France).
Cette présentation a pour but de faire le point sur les nouveautés du framework AngularJS 2.
http://www.breizhcamp.org/
Introduction to Angular for .NET DevelopersLaurent Duveau
Technical presentation given by Laurent Duveau at the Ottawa IT Community meetup on January 10, 2017.
https://www.meetup.com/ottawaitcommunity/events/235519260/
Slides from my latest talk (and videos) about Angular dependency
injection, You can find related videos here: https://www.youtube.com/playlist?list=PLfZsWIHsTcftJl7WlidsXSBAHBXQBR4j2
Web Components mit Polymer und AngularJS 1.xPatrickHillert
The talk was held in Mainz at the JAX on April 21, 2016 The language is german.
„Software is eating the world“ und das moderne Web hat sicherlich einen sehr großen Anteil daran. Wie könnte aber die nächste Evolutionsstufe im Web aussehen? Ein Kandidat sind hier die Web Components, die einen sehr einfachen Einstieg in die komponentenbasierte Strukturierung von Webanwendungen bieten. Hierbei können auch einzelne Komponenten in bestehende Anwendungen integriert und nachgerüstet werden, ohne dabei das Entwickler-Know-how im konkreten Framework zu verlieren. In diesem Vortrag wird zunächst ein Überblick über den aktuellen Status quo von Web Components gegeben und anschließend beispielhaft gezeigt, wie sich Komponenten in eine bestehende AngularJS-Anwendung integrieren lassen.
Ein Ausblick auf Tooling und kommende Features rundet den Vortrag ab.
Après de longs et interminables et TERRIBLES mois d'attente, ce qui devait arriver arrivera ! L'annonce de l'arrivée d'Angular 2 arrive !
Après de longs et interminables et TERRIBLES mois d'attente, ce qui devait arriver arrivera : l'annonce de l'arrivée d'Angular 2 arrive ! Courant mai 2015, la team d'Angular a flaggé la version 2.0.0-alpha.27 (version actuelle : alpha.36) en version dite de "Developer Preview". Bonne nouvelle : les développeurs, c'est nous ! C'est donc l'occasion de faire ensemble un petit tour d'horizon de cette jeune -et non moins prometteuse- mouture de notre framework JS préféré ! Durant 45 minutes, nous examinerons Angular 2 sous toutes ses coutures : ce qu'il apporte de nouveau, comment l'utiliser, le migrer voire même le tester sans le detester ! Ce rapide tour d'horizon servira de tremplin à un atelier pratique et encadré d'environ un heure ou vous prendrez en main le framework.
N'ayez crainte, nul besoin d'être un expert toutes catégories Front confondues, de simples notions de programmation en Javascript suffiront ! Il faudra toutefois vous munir d'un ordinateur sur lequel vous aurez préalablement installé Node.js, Git (optionnel) ainsi que votre IDE préféré.
Angular 1.x reloaded: improve your app now! and get ready for 2.0Carlo Bonamico
The buzz about the upcoming major reincarnation of AngularJS, with its hot mix of excitement and critics, has somehow shadowed the immediate gains enabled by the recent 1.3 and 1.4 releases.
This code-based talk will introduce concepts such as the "Controller As" syntax, component-based directives, the new router and bind once, to demonstrate how mixing these currently available Angular features with good design patterns (and a bit of ES6) provides concrete improvements in performance, modularity, testability and developer productivity to our apps now.
Furthermore, it will show how the main ideas at the basis of Angular 2.0 (API simplification, consistency, even more componentization and interoperability with ES6 and Web Components) can be applied to the design and implementation of 1.x applications, helping us both being more productive now & simplifying the upgrade to the "new" Angular.
This fast-paced overview for beginners discusses some aspects of AngularJS 1.x and 2.x, which versions to learn (and why), and the technologies that you need to learn. We'll delve into examples of combining AngularJS with other technologies (such as BackboneJS and D3.js), and also address the +/- of AngularJS.
Comment réussir son projet en Angular 1.5 ?Maxime Bernard
À travers un retour d'éxpérience, je vous propose de découvrir les outils, les nouveautés d'Angular 1.5 et quelques tips & tricks qui vous aideront dans la réussite de votre projet Angular.
This presentation is an effort to combine all the cool features present in Angular and provide a basic idea about how it would help a developer overcome some of the common issues faced in client side development.
https://youtu.be/_yLt_abcK2w
Angular is a TypeScript-based open-source front-end platform that makes it easy to build applications with in web/mobile/desktop. The major features of this framework such as declarative templates, dependency injection, end to end tooling, and many more other features are used to ease the development.
Angular 7 is a Javascript framework built around the concept of components, and more precisely, with the Web Components standard in mind. It was rewritten from scratch by the Angular team using Typescript (although we can use it with ES5, ES6, or Dart as well).
Angular 7 is a big change for us compared to 1.x. Because it is a completely different framework than 1.x, and is not backward-compatible. Angular 7 is written entirely in Typescript and meets the ECMAScript 6 specification
angular interview questions and answers, angular 7 interview questions and answers, angular interview question, angular interview questions and answers for experienced, angular 7 interview questions, angular 6 interview questions,
angular interview questions, angular 6 interview questions and answers, angular 2 interview questions, angular7, angular 5 interview questions, angular interview, angular 2 interview questions and answers, angular questions and answers
Presentation about new Angular 9.
It gives introduction about angular framework.
Provides information about why we use angular,
additional features and fixes from old versions. It will clearly explain how to create a new angular project and how to use angular commands and their usages.
It will also explain about the key components like angular architecture, routing, dependency injection etc.,
Angular js interview question answer for fresherRavi Bhadauria
AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.
this presentation serve as an introduction to Angular JavaScript framework and also touch on some basic modern JavaScript, front-end development basics.
Top Angular Interview Questions and answers would help freshers and experienced candidates clear any Angular interview .Do let us know the Angular questions you faced in the interview that are covered ...
“Angular 2-in-1" is an attempt to show both theory+practice, cons & pros of technology, in single turn. As a result, each listener could make his own, conscious choice of tools for work and play.
This presentation by Rostyslav Siryk (Senior Software Engineer, Consultant, GlobalLogic Kharkiv) was delivered at GlobalLogic Kharkiv JS TechTalk on December 18, 2017.
We Will learn about:
What is AngularJs?
Key Points
Core Features of AngularJS
How is it works?
AngularJs Terminologies
AngularJs directives
How we start work on AngularJs?
AngularJs Tags
How we use Yeoman?
Advantages and Disadvantages
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.
UiPath Test Automation using UiPath Test Suite series, part 3DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 3. In this session, we will cover desktop automation along with UI automation.
Topics covered:
UI automation Introduction,
UI automation Sample
Desktop automation flow
Pradeep Chinnala, Senior Consultant Automation Developer @WonderBotz and UiPath MVP
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
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.
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
Keynote at DIGIT West Expo, Glasgow on 29 May 2024.
Cheryl Hung, ochery.com
Sr Director, Infrastructure Ecosystem, Arm.
The key trends across hardware, cloud and open-source; exploring how these areas are likely to mature and develop over the short and long-term, and then considering how organisations can position themselves to adapt and thrive.
Neuro-symbolic is not enough, we need neuro-*semantic*Frank van Harmelen
Neuro-symbolic (NeSy) AI is on the rise. However, simply machine learning on just any symbolic structure is not sufficient to really harvest the gains of NeSy. These will only be gained when the symbolic structures have an actual semantics. I give an operational definition of semantics as “predictable inference”.
All of this illustrated with link prediction over knowledge graphs, but the argument is general.
Connector Corner: Automate dynamic content and events by pushing a buttonDianaGray10
Here is something new! In our next Connector Corner webinar, we will demonstrate how you can use a single workflow to:
Create a campaign using Mailchimp with merge tags/fields
Send an interactive Slack channel message (using buttons)
Have the message received by managers and peers along with a test email for review
But there’s more:
In a second workflow supporting the same use case, you’ll see:
Your campaign sent to target colleagues for approval
If the “Approve” button is clicked, a Jira/Zendesk ticket is created for the marketing design team
But—if the “Reject” button is pushed, colleagues will be alerted via Slack message
Join us to learn more about this new, human-in-the-loop capability, brought to you by Integration Service connectors.
And...
Speakers:
Akshay Agnihotri, Product Manager
Charlie Greenberg, Host
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualityInflectra
In this insightful webinar, Inflectra explores how artificial intelligence (AI) is transforming software development and testing. Discover how AI-powered tools are revolutionizing every stage of the software development lifecycle (SDLC), from design and prototyping to testing, deployment, and monitoring.
Learn about:
• The Future of Testing: How AI is shifting testing towards verification, analysis, and higher-level skills, while reducing repetitive tasks.
• Test Automation: How AI-powered test case generation, optimization, and self-healing tests are making testing more efficient and effective.
• Visual Testing: Explore the emerging capabilities of AI in visual testing and how it's set to revolutionize UI verification.
• Inflectra's AI Solutions: See demonstrations of Inflectra's cutting-edge AI tools like the ChatGPT plugin and Azure Open AI platform, designed to streamline your testing process.
Whether you're a developer, tester, or QA professional, this webinar will give you valuable insights into how AI is shaping the future of software delivery.
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other?
Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf91mobiles
91mobiles recently conducted a Smart TV Buyer Insights Survey in which we asked over 3,000 respondents about the TV they own, aspects they look at on a new TV, and their TV buying preferences.
Accelerate your Kubernetes clusters with Varnish CachingThijs Feryn
A presentation about the usage and availability of Varnish on Kubernetes. This talk explores the capabilities of Varnish caching and shows how to use the Varnish Helm chart to deploy it to Kubernetes.
This presentation was delivered at K8SUG Singapore. See https://feryn.eu/presentations/accelerate-your-kubernetes-clusters-with-varnish-caching-k8sug-singapore-28-2024 for more details.
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
Transcript: Selling digital books in 2024: Insights from industry leaders - T...BookNet Canada
The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more.
Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/
Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.
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.
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
2. about: me
Ross Dederer, Developer Relations
Wijmo specializes in JavaScript UI controls
o Grids, FlexSheet
o Charts, Financial Charts, Gauges
o Inputs, etc
o OLAP
Supported AngularJS since the early days and now offer full Angular 2 support.
Wijmo Team always researching new frameworks
o React and Ember coming soon
3. about: discussion
What is Angular 2?
TypeScript
o Introduction
o IntelliSense
Angular 2: 8 Building Blocks
Data Services Quick Start – Migration Story: Silverlight to HTML5
Migrating View to Angular 2 template
Migrating ViewModel to Angular 2
6. Angular 2: introduction
Modular
o Smaller Core
Modern
o Evergreen browsers using ECMA 6
o Legacy Browsers supported
Component-Based
Developed using TypeScript
Documentation has two tracks
Google will continue developing Angular 1.x
o Wijmo will continue to support it
7. TypeScript: introduction
TypeScript was created by Microsoft ( FOSS )
Google is fully adopting TypeScript for Angular 2 development
Superset of JavaScript that compiles to plain JS
o Any browser, any host, any OS
Offers classes, modules, and interfaces
Object-Oriented with Classes, etc.
Type Safety
Find errors at design time
8. IntelliSense
Feature of TypeScript
o Not exclusive to Angular 2
Familiar experience for experienced C# developers
Self-documentation
9. Angular 1 vs. Angular 2: Visual Studio
Angular 1
JavaScript
Angular 2
TypeScript
10. Angular 2: first impressions from Wijmo devs
Better Encapsulation – Modular Design
o Components
Angular 2 seems more natural than Angular 1
o Delegates tasks to JS interpreter.
o Leverages HTML5 more efficiently
Typescript Integration
o IntelliSense
No $scope or $watch
12. Module
Application is a collection of Modules
Angular provides us built-in modules
Dedicated to single purpose
Expose “things” – classes, functions, values
o Other modules import these “things”
import {PortingFromSL} from './app';
import {Component} from 'angular2/core';
export class PortingFromSL{ }
13. Component
Define a module as component by attaching Meta Data to plain old TS class
Controls patch of screen – View
Contains our class that interacts with the view
o Via API of properties and methods.
Each Component has a companion Template
“Code-behind” for components View
Angular creates updates and destroys components
14. Templating
Components templateUrl contains component Template
A form of HTML (not an HTML Form)
Introduces new syntax
o *ngIf , *ngFor
Angular manages the component and its view (template)
All HTML is valid Template Synatx
15. Metadata and Decorators
Decorators
o @component
Metadata
o Selector
o TemplateUrl
o Directives
o Providers
The template, metadata, and component together describe the view.
16. Data Binding: overview
Interpolation {{ value }}
Template Expressions [property]=“expression”
o Produces a value
Template Statements (event)=“statement”
o Responds to event
Two-way Data Binding [(target)] = “expression”
18. Data Services Quick Start Application
Loading data into Wijmo CollectionView
o Sort, filter, group
Managing hierarchical data to reflect current state
o Master Detail Relationships
Binding data to Wijmo controls
o Line of business application template – Grid’s inputs
Live Demo: http://demos.wijmo.com/5/Angular/PortingFromSL/PortingFromSL/
19. Application Structure: new things
In Ng 1, we needed to create a new app and give it a controller to
handle all of the business logic.
o No more controllers in Ng 2
In Ng 2, we will organize our app inside a module component that
we will call PortingFromSL
o We will leverage the benefits of TypeScript here
In Ng 2, we will move all of our markup and templating sits in
app.html
In Ng 2, we need to introduce a root component loader
20. Migration from Angular 1 to Angular 2
Convert JavaScript to TypeScript
o Not required but I recommend it
Keep familiar MVVM development pattern
Porting the ViewModel — Component
o No controller?
o No $scope?
Porting the View
o New attribute syntax
21. Bootstrapping - Launching Application
From bootstrap.ts :
import {class} from './app';
bootstrap(class.component);
Inside default.htm:
System.import(“/src/class.component”);
22. Porting the Model
We luckily will use the same model/Datasource
o JSON coming from service can serve as model.
private _svcUrl: string = 'http://services.odata.org/Northwind/Northwind.svc';
23. Porting the ViewModel
CollectionView objects for Customers, Orders, Details
Load some data using AJAX
Ng 2 More closely related to SL than NG1
Class App
customers: wijmo.collections.CollectionView; // or any
Constructor
this.customers = new wijmo.collections.CollectionView();
24. Porting the view: html
New Template Syntax
Updated Bindings
Need to add placeholder in default.html
In Angular 1: In Angular 2 :
25. Porting the view: wijmo controls
Angular 2 code:
New Binding syntax
New Template syntax
Local Variables
26. Migrating the ‘Controller’
export module portingFromSL {
@Component({
selector: 'app',
templateUrl: 'src/app.html',
})
export class App {
// business logic
}
29. Conclusion
Read more at:
o www.wijmo.com/angular2
o Angular.io
Contact me at ross.dederer@grapecity.com
Editor's Notes
Hello Everyone, welcome to the GrapeCity webcast; How to migrate an application from Angular 1 to Angular 2
So for today, I want to cover..
Here is a screenshot of what the original application looked like in Silverlight. You can see we have all the basic Line of Business behavior but what this is really lacking is portability. You need to install an SDK to get this to run in your browser and it will not work on Mobile devices. About a year or two ago we ported the Silverlight application over to HTML5 and AngularJS.
Today, I want to continue this migration story and take our HTML5/AngularJS sample and port it to more improved Angular 2.
So this is what the app looks like that we will be demoing today.
< Go to Visual Studio and show the sample running >
So before we begin migrating, lets talk about what Angular 2 is. Simply put: Angular 2 is a framework. You can use it to help build client applications in HTML and JavaScript or Typescript.
<Click through>
Angular 2 is modular by design. Groups of coordinated components divide the responsibilities of our application.
Angular 2 is a very modern framework. I will not get into all of the details today but Angular 2 uses optimization techniques for performance such as server side pre rendering.
Angular is broken down into eight main building blocs , module, component, template, metadata, data binding, services, directives, and finally dependency injection.
Angular 2 documentation is broken down into two learning tracks, one fore Typescript learning and one for JavaScript learning. For my migration and for the rest of the talk, we will stick with the Typescript track.
Google has announced that they will continue supporting Angular 1.x and Wijmo will do so as well.
Typescript is a programing language developed and maintained by Microsoft and is provided free and open source. Anders Hejlsberg ( halls-burg ) is the founding father of not only Typescript but C# as well, so it should look familiar for those coming from a .NET c# background.
Google has announced they are fully adopting TypeScript for their Angular 2 development which is pretty cool.
I personally like to use Visual Studio for development ; of which Typescript is supported in VS 2013 v2 and above.
If you aren't a windows user and are looking for an alternative to Visual Studio, you can use NodeJS to install the Typescript compiler if you want: its just
Npm install –g typescript
A nice feature of TS is that we can find errors in our application and logic at design time as opposed to at run time. Finding errors at runtime can sometimes either be too late or difficult to address.
If you have never worked with TS before, its okay, its easy to pick up and learn if you already know JS. In fact, at run time, your TS that we write will be transpiled, using babble or web pack or something like this, into pure JS to run in browser.
Typescript is going to offer us the ability to use classes, allow for type safety, and better be bugging.
Typescript itself is being adopted more and more for large scale enterprise development
So after running through the documentation and playing around with the quick start guides I made a list of some of my first impressions and borrowed some from our development team here at Wijmo.
At first glance I noticed the seperation of concerns.
Angular2 itself doesn’t require a modular approach but it is recommended. As we said though for this webcast we will be using TypeScript and adopting a modular design approach.
Components are the unified mechanism for creation of any part of an application, from the application itself, to separate pages, to small UI controls. If you know how to create one of them then you immediately know how to create the others. By using Components you force yourself to create self-sufficient parts that are automatically ready for reuse.
I will demo this later but creating a component in Angular 2 is very simple, all we need to is add a Component Decorator to our TypeScript class and we can access it from our markup.
Angular2 just seems more natural, from a coding standpoint, than Angular 1 or even other frameworks like Knockout. In Angular2 we don’t need to have ko.observable or $scope wrappers all over the application.
No more “scope”. The “scope” object present in Angular 1 is gone in Angular 2. This special variable existed mostly to enable change tracking, with its “$watch” and “$apply” methods. It is no longer needed;
Here is an imagine from Googles documentation. It does a good job showing you the role each building block does.
You can see on the left hand side we have our module components and module services.
Below that we are going to have our injectors that inject a service. For this demonstration today, I did not use a Data service to get our data so I will not be referring to services and injectors to much during the rest of the discussion. Once we have our component built you will see its very easy to add an injector or service.
We will, however, spend some time working with Templates, metadata, and Components. After we have discussed some templating and componentes, I will walk you though property and event binding and show you how I use it in my application.
What do we mean when we say Transpilation. What we are referring to is source to source compilation which means that we are going to take the source code of a program written in one programming language as its input and output the equivalent source code in another programming language.
Rest assured though knowing that if you get an error in your Javascript at runtime, you can use the map to go look where in your TypeScript file that error is coming from. Otherwise your breakpoints aren’t going to make any sense when you are debugging something at run time.
We are basically staying at the same level of abstraction. An example of this would be something like Pascal to C.
You might begin to notice that our Typescript looks like C# code.
Looking like C# though is not enough to convince C# developers to pick up TS and start developing. C# developers like to use built in tools such as IntelliSense. Well, luckily TS, unlike JS, supports IntelliSense.
A module should be dedicated to a single purpose, generally exporting one thing such as a class.
This is from the documentation but I think they did a good job summarizing the take aways here
Angular apps are composed of modules
Modules export things – classes, functions, values – that other modules import
We prefer to write our application as a collection of modules, each module exporting one thing.
For our example today, we are only going to export components. if we want to create a component we will need to import the component library into our module. The syntax should look familiar.
We define a Component's application logic - what it does to support the view - inside a class. The class interacts with the view through an API of properties and methods.
Think of a component as something that controls a patch of screen real estate which we and the Angular team will call a View. Most everything the user sees will be a view controlled by a component.
Each component has a companion template, we will be demoing this in our quick start application.
Angular is going to create, provide updates, and destroy components as the user moves through the application.
The component comprises of two core parts:
Typescript class which has a ts file extensions, implements the model and controller and exposes properties and events that can be used in the view. Think of it as a code behind for the components view
The second core part is the view itself, implemented in an HTML file. This defines the look of the component. Additionally, as I will demo I will show some event and properties bindings as well.
This is outside the scope of the demonstration today but we can use Components to provide the whole SPA application look, with nav menus and a special place where current page should be shown and provide additional application routing, although his is a simple application, I will not spend to much time discussing routing
We will get into decorators and metadata selectors when we get to the demo
We will need to define a components view with its companion template. A template is a form of HTML that is going to tell Angular how to render the component.
Templates will generally look like HTML but as we will see in the sample, we will introduce some new syntax in the demo.
Many of us are already familiar with component/template duality from our experience with MVC and MVVM. In Angular, the component plays the part of the controller/viewmodel, and naturally the template represents the view.
Almost all HTML syntax is valid template syntax. The <script> element is a notable exception; it is forbidden, eliminating the risk of script injection attacks. Obviously some tags are not very helpful such as body and html so you probably wont see them in practice
We can extend the HTML vocabulary of our templates with components and directives that appear as new elements and attributes.
Before we can migrate our view in our application, we need to talk about some new data binding and accessing the DOM.
The second to last building block that I wanted to cover today is MetaData Luckily in our application I only used @component so we can keep it simple.
Up until this point we have really only talked about a class, Angular is still a bit unsure what to do with a TypeScript class. Its not a component untill we attach some metadata to the class. The easiest way to attach metadata in TypesScript is with the decorator.
This is going to go before we define our class. Think of a decorator as a function that can have configuration properties. For today we are going to focus on templateUrl and selector
selector - a css selector that tells Angular to create and insert an instance of this component where it finds a <hero-list> tag in parent HTML. If the template of the application shell (a Component) contained
<hero-list></hero-list>
Angular inserts an instance of the HeroListComponent view between those tags.
templateUrl - the address of this component's template which we showed above.
directives - an array of the Components or Directives that this template requires. We saw in the last line of our template that we expect Angular to insert a HeroDetailComponent in the space indicated by <hero-detail> tags. Angular will do so only if we mention the HeroDetailComponent in thisdirectives array.
providers - an array of dependency injection providers for services that the component requires. This is one way to tell Angular that our component's constructor requires a HeroService so it can get the list of heroes to display. We'll get to dependency injection in a moment
I saved the best for the last. Data Binding is key to Angular 2, without a framework handling it, we would be responsible for pushing and pulling data values into the HTML controls, as well as responded to events. Data Binding is a mechanism for coordinating parts of a template with parts of a component.
There are four forms of Data Binding, each having a direction as indicated by the errors in the picture.
The first is interpolation, which may be familiar to us from our early days of AngularJS development. We can use it to place calculated strings into text between HTML tags and attribute assignments.
The second follows the same direction and is referred to as Template Expressions.
The third is Template Statements. These respond to an event raised by an element, component, or directive. Think of this binding as one that has a side effect, its how we update application state based on user input.
The forth and final mechanism is a one that combines property and event binding in a single notation.
When we get to visual studio I will show you all this in the code but I wanted to walk you through what exactly we are doing in this application if you have not seen it before.
To begin we will load some data from the Northwind data source and build three separate collection views, one for customers, orders, and a union of the too we called details. We are going to load these into the Wijmo collectionVIew so that the CollectionView will handle pagainating our data, sorting, filtering, and keeping track of the current selected Item.
The application will load a list of customers, when the user selects a customer, the app displays the orders placed by that customer. As the user naviagates around the controls the state of the application will change. For example, when a user selects a customer, the app will display the orders placed by that customer. Additionally, when the user selects an order, the app displays the orders detail. The type of master-detail relationship is another common feature of MVVM apps.
Finally, we will bind some data to our controls. The combobox control provides customers and orders. Textbox controls to provide order information, and finally a datagrid to show orders details. We picked these three controls because most line of business applications utilizie some sort of combo box, input box, and data grid.
The original source from Microsoft is still available online.
To begin, lets talk about how we are going to structure this application and do a comparison between Ng 1 and Ng 2
There are a few languages out there that really enable you as a developer the ability to develop better large scale applications. A few of which are TypeScript, CoffeeScript, and PureScript.
For today, we are going to use TypeScript for many reasons. The first of which is static type, and modules and classes. Which makes the language a strongly type langauge. It is easier to learn because it is a superset of JavaScript. The current version of Angular 2 is being developed in TypeScript and we are traditionally Microsoft VisualStudio users and Typescript has many built in features in more modern VS environments. Its worth noting here that there are many freely available resources out there to learn TS. I will talk more about this later. At the end of the day, simply put, TS compiles into JS
After we have finished porting the ViewModel I will show you some key things that are not included in the Ng2 app that you may be finding yourself looking for if you are used to Ng1 like scope or controllers.
Finally, I will show you how we will be handling our view, it is slightly different than the approach in Angular 1 and Ng 2 has introduced some new data binding features as well as templating syntax.
In the next slides I will show you how to migrate a simple plain html element to work well with your Ng 2 bindings as well as demo how you can utilize wijmo’s controls as we fully support their new bindings.
This is not Bootstrap, the twitter CS/JS framework but Angular Bootstrap. In Angular 1, we would tell angular to bootstrap a file if it saw ng-app in the html or body tags. You could from there define your applciation a controller. You could reuse that controller across other ng-apps . That controller will then provide you everything inside the scope. For example, you could assign a controller to body or to a simple div. If you are familiar with Ng2, you will see that this is no longer required in our default.htm page. We will define our Ng2 components as elements not as attributes of elements, if that makes sense.
Instead we are going to use SystemJS to load in a bootstrap file that will contain everything Angular 2 needs to now to get up and running.
We will need to do two things to actually run the application, the first is to call Angulars browser bootstrap function and then pass it it our application root component that we just wrote. Here the code more generic, I will show you specifically what I had to do in my code later during the demo section, but you should be able to follow this syntax when building your own application.
Here we are going to create objects for customers, orders, and details. Due to screen reel estate I just put customers on the slide but I will show you the code as well.
We are going to use AJAX to load some data into these collectionsViews and then build our details collectionView based on user input.
In our class definition you will see that we are going to define customers as a wijmo.collections.CollectionView type. This will expose every thing to us in intellisense when we reference customers later in the application. If we arent sure what type to use, maybe its because we are earlier on in our migration phase, we can simply assign any here and Angular will not enforce strong types. Finally we instaniate a new collectionView in our default constructor.
Angular 1 offered us over 70 built in directives and of course the community added many more many people in this room have probably even written their own private directives.
In Angular 2 we can achieve the same end result without needing all of those special directives due to the more advanced binding system.
Lets look at an example on the right hand side of the screen.
Of course, there still are some built-in directives to solve complex tasks. And of course we will still need to write some of our own directives.
For today, I am only going to focus on the template syntax that we are going to use in the demo
ngFor is a repeater directive that we did not have in Angular 1. This allows us to present a list of items. This allows for a literal reading.
So this literally means: Take each JSON object in the QueryResources array, store it as a local qh variable, and expose it to the grid. Additionally we capture the index so we can make a list 1-x.
If your curious where the # sign came into play, this is us just creating a local template variable. Applications are constructed as a tree of component instances, with easy access to each instance. By marking a component element in markup with a local template variable (e.g. #var) you get access to its instance with all its properties and methods that can be used in both markup binding expressions and TypeScript code.
Finally we use interpolation to display the current index and a link to the JSON data
There are many more but I am only foxuing on the ones we are using today.
Lets take a look at what our Default.html would look like in an Angular 2 application. Everything will appear normal until you see our app-cmd tag. The tag is going to represent a root application component. Our demo today will only have one component. All the sample life happens inside this component, and default.htm is used solely to add this component and bootstrap the application in this way.
Think of a component as a single unit which is a model, a controller, and a view.
In Angular 2, everything is a component, be it the application itself or parts like a wijmo control.
In Angular 1, the developer has full freedom to define views and controllers seperately, and combine them in an arbitrary manner. The developer can use the controller across muliptle views as necessary. In Ng 2, we cant define them separately and combine them as needed, we need to utitilize Typescript class inheritance capability. If you are interested in learning more about this concept, I would encourage you to check out our explorer sample