This document summarizes a meetup comparing Angular2 and React frameworks. It provides overviews of both frameworks, including their histories, core concepts, and differences. Some key points covered include React's use of a virtual DOM for efficient updates, Angular2's focus on being a full development platform, and both frameworks' growing communities and adoption. The meetup agenda also included rounds for comparing the frameworks and a Q&A panel discussion.
Your Angular app grew up and became too slow, so that you want to make it faster by implementing React framework.
How to do it? Is it worth it? What's the easiest way? What are pros and cons? You can derive all of that from this presentation.
(It may also be useful if you're just making a choice between these two frameworks.)
Angular 2 vs React. What to chose in 2017?TechMagic
The number of web development frameworks and libraries based on JavaScript continue increasing. The most popular client-side technologies are Angular and React, but you might ask - What should I use?
Your Angular app grew up and became too slow, so that you want to make it faster by implementing React framework.
How to do it? Is it worth it? What's the easiest way? What are pros and cons? You can derive all of that from this presentation.
(It may also be useful if you're just making a choice between these two frameworks.)
Angular 2 vs React. What to chose in 2017?TechMagic
The number of web development frameworks and libraries based on JavaScript continue increasing. The most popular client-side technologies are Angular and React, but you might ask - What should I use?
Getting started with the reactjs, basics of reactjs, introduction of reactjs, core concepts of reactjs and comparison with the other libraries/frameworks
In Angular1, each component / page manages its own internal state. In modern web apps, that approach just doesn't cut it. Different components need to share state, sometimes even across pages.
Redux is one solution that solves this, but rarely do we see it being used with Angular1.X. It is more commonly used in React & Angular2 apps.
In this talk we will go over the choices you have for managing an application-wide state in Angular1, and examine the integration of Angular1 with Redux.
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
These are the slides from Johannes Weber's talk which were presented on AngularJS Lightning Talks #2 (2014-06-26) in Munich. More details about the event: http://www.meetup.com/AngularJS-Munich/events/164424472/
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.
ReactJS is arguably the most popular Javascript framework around for web development today. With more and more teams exploring and adopting React, here is TechTalks presentation elaborating fundamentals of React, in a code along session
Sulok Jha and Ramani Iyengar, engineers at Atlogys Technical Consulting deliver a very informative talk on reactJS - what it is, how to use it, when to use it etc.
This is a must watch for anyone wanting to get started with .reactJS technology.
Video: https://youtu.be/c_YVA-Aa7gA
New language, new framework, new tools and new concepts. Angular 2 beta is ready and gives developers a solid ground to build their applications.
This talk will go through the core concepts of Angular 2 including components, directives, observables and more!
Some slides I put together about some differences between Reacts eco system and Angular2.
Hopefully you can use this information and links to help you decide what framework/ecosystem is best for you.
Getting started with the reactjs, basics of reactjs, introduction of reactjs, core concepts of reactjs and comparison with the other libraries/frameworks
In Angular1, each component / page manages its own internal state. In modern web apps, that approach just doesn't cut it. Different components need to share state, sometimes even across pages.
Redux is one solution that solves this, but rarely do we see it being used with Angular1.X. It is more commonly used in React & Angular2 apps.
In this talk we will go over the choices you have for managing an application-wide state in Angular1, and examine the integration of Angular1 with Redux.
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
These are the slides from Johannes Weber's talk which were presented on AngularJS Lightning Talks #2 (2014-06-26) in Munich. More details about the event: http://www.meetup.com/AngularJS-Munich/events/164424472/
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.
ReactJS is arguably the most popular Javascript framework around for web development today. With more and more teams exploring and adopting React, here is TechTalks presentation elaborating fundamentals of React, in a code along session
Sulok Jha and Ramani Iyengar, engineers at Atlogys Technical Consulting deliver a very informative talk on reactJS - what it is, how to use it, when to use it etc.
This is a must watch for anyone wanting to get started with .reactJS technology.
Video: https://youtu.be/c_YVA-Aa7gA
New language, new framework, new tools and new concepts. Angular 2 beta is ready and gives developers a solid ground to build their applications.
This talk will go through the core concepts of Angular 2 including components, directives, observables and more!
Some slides I put together about some differences between Reacts eco system and Angular2.
Hopefully you can use this information and links to help you decide what framework/ecosystem is best for you.
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!José Barbosa
Vuejs, Angularjs e Reactjs são os três principais três frameworks front-end do momento. Veja algumas semelhanças e diferenças entre cada um.
Palestra no meetup de vue.js
I miss my days in the army, doing C++ over Unix, without internet connection.
Back then we had very primitive tools, but very limited choice.
Choosing a stack for a webapp today is a mission impossible, and it just gets worse and worse.
Angular 1 swept us away from Backbone completely, but now Angular 2 is a totally new framework, and React has started filling in the gap.
In this talk I will discuss the principal differences of the top frameworks and their approaches
In terms of style of code, community, performance, core team, typescript vs. ES6, immutable objects, flux and more.
Introduction to React in combination with Redux. Redux helps you to develop applications in a simple way while having features like time-travel available during development.
FITC events. For digital creators.
Save 10% off ANY FITC event with discount code 'slideshare'
See our upcoming events at www.fitc.ca
Getting Started with Angular 2
with Rob McDiarmid
OVERVIEW
Angular 2 is a powerful framework that lets you create fast and scalable web apps with clean and readable code. With the lessons learned from previous web frameworks and the advantages of modern web technologies, the Angular team has created a framework that will push the limits of what SPAs are capable of.
In this session we’ll go through building an Angular 2.0 app from the ground up. In the process, you will learn how it handles core concepts like components, templates, services, and routing. You’ll also see how angular takes advantage of ES6 modules, Web Components, and TypeScript. By the end of the session, you’ll have a good understanding of why you might want to use Angular 2 for your next project and how to get started.
OBJECTIVE
Demonstrate what Angular 2 has to offer and reduce the barrier to entry.
TARGET AUDIENCE
Web Developers interested in learning Angular 2.
ASSUMED AUDIENCE KNOWLEDGE
Intermediate experience with JavaScript.
FIVE THINGS AUDIENCE MEMBERS WILL LEARN
1. Core concepts of the Angular 2 framework
2. How to use ES6 modules
3. The benefits of TypeScript annotations
4. How to setup an Angular 2 project from scratch
5. The ecosystem of tools that Angular 2 apps will be built on
En 2013, Facebook lanzó una nueva librería llamada React para competir contra Google y su framework Angular. Ambos están basados en Javascript y teóricamente están hechos para desarrollar páginas web. Sin embargo, con el paso del tiempo, sobre todo Angular, se han ido utilizando para hacer aplicaciones móviles cross-platform. Por eso, hacía falta ver qué nos ofrece Angular comparado con React y ver si se podría aprovechar una combinación de los dos para poder hacer proyectos aprovechando los beneficios de ambos.
Prezentacja wyjaśnia różnice pomiędzy wzorcami MVVM oraz MVC w kontekście iOS'a. Znajduje się w niej analiza dwóch prostych aplikacji: jedna korzysta ze wzorca MVVM, druga MVC
Over the past several years, as the role of the browser has grown, rich desktop-like apps have emerged built entirely in the browser. To enable this movement, a new generation of powerful JavaScript frameworks have emerged including EmberJS, AngularJS, BackboneJS, and React. In this 30 minute crash course on front end frameworks, Bloc co-founder and CTO Dave Paola will cover the history of front end web development, the recent emergence of these new Javascript frameworks, and go over some of the pros and cons for learning them.
We'll hear from Bloc co-founder and CTO Dave Paola and Bloc Developer Christian Schlensker. Prior to Bloc, Dave was a developer at Kontagent, has over 15 years of software development experience, and has founded numerous other companies. Christian comes to Bloc from Pinchit and TAG where he was a developer. Prior to that, Christian was also a graphic designer.
In our experience, beginners are often overwhelmed by buzz words like "HTML5," "JavaScript," and "Ruby." Without an experienced guide, they can spend months going down rabbit-holes drilling into specific languages, and emerge frustrated that they can't build a real website. Dave will start by helping you visualize the front end web development landscape.
Comparing Angular, Ember, Backbone, and React
2
Once you understand the landscape, Dave will introduce the four major front end frameworks that have emerged over the past two years. He'll discuss the pros and cons of learning each one, from the point of view of a beginner. These four frameworks are: AngularJS, EmberJS, BackboneJS, and ReactJS.
Choosing Javascript Libraries to Adopt for DevelopmentEdward Apostol
"Sorting out the JS Mess" was the title of my sample presentation I led at @Red Academy, talking about how the history of the development workflow with Javascript and how it influences what tools, libraries and steps we take to develop web and mobile apps. I featured a demo using React, and discussed Angular 2, JQuery, Meteor, and other Javascript libraries and frameworks from the context of my development experience.
Oracle JavaScript Extension Toolkit Web Components Bring Agility to App Devel...Lucas Jellema
In this slidedeck learn how Oracle JavaScript Extension Toolkit web components enable a higher level of productivity, agility, and maintainability of rich client web applications. The reusable components can be shared across pages, applications, and teams—and even across the global community. The components can be developed separately from the applications that consume them and can be deployed and updated independently. They are also well-suited to be used as the user interface for a microservice that is mashed up in a larger web application or portal. Learn the why and how of Oracle JavaScript Extension Toolkit web components, tooling to use for productivity and agility, and a proven approach for microservice UI implementation.
React Native and the future of web technology (Mark Wilcox) - GreeceJS #15GreeceJS
What's all the hype about React Native? What is it? How does it work? Why does it matter and what clues does it give us about the future of web development? Did you know there's a React Native for the Web? What's that all about? It can't be all good, what's wrong with it? Where should you go to find out more?
Red Hat JBoss BRMS and BPMS Workbench and Rich Client TechnologyMark Proctor
This is an overview video that shows the scope of work and technology used within the Red Hat JBoss BRMS and BPMS platforms.
The technology presented builds with GWT, Errai and UberFire as the foundation. Over 2015 we'll be working to make it for end users to consume the bits they need, paying for only what they use, so others can make power web platforms like BRMS and BPMS.
Introduction to web application development with Vue (for absolute beginners)...Lucas Jellema
In this slide deck I show you how you can easily and quickly create quite rich web applications with Vue 3 – without having to study complex concepts or understand many technical details. I have only recently learned how to work with Vue 3 myself and now is the best time for me to share my learning experience (and my enthusiasm) with you. I know what I found essential to understand and what most got me excited in these early steps (what was a little bit hard to grasp). I believe that I can present my steps and guide you to experience the same fun and have a similarly gratifying experience. I am not an expert in this subject – I have barely learned how to walk and that is why I can help you with these first steps with Vue.
In this deck, I do not explain how Vue works. I do not really know that. I will show you how to work with it and how to create web applications that are functional, appealing, fast and responsive.
The approach I am taking is straightforward:
• I will tell you a little bit about web development, browsers and reactive frameworks
• I will show the hello world of Vue applications
• I will explain about components and nesting, events, data binding and reactive behavior and demonstrate these concepts
• I will introduce Vue UI Component libraries – and with no effort at all we will launch our application to the next level – with rich components to explore, manipulate, visualize data collections
• We will publish the web application from our development environment to where the whole world could see it – using GitHub Pages
• As bonus topic – we discuss state management
At the end of this session you will be able to quickly create a simple yet rich web application with Vue 3. You have a starting point to further evolve your skills with the many online resources I am convinced that you will enjoy your newfound powers and the simplicity and power of Vue 3.
Note: a tutorial accompanies this slide deck - see https://github.com/lucasjellema/code-face-vue3-intro-reactiive-webapps-aug2023/blob/main/README.md
Turbocharge your development efforts your with a "hands on" introduction to quickly building apps using the MongoDB database as a service offering known as Atlas and the serverless / REST based application development environment known as Stitch. We'll begin with a brief introduction to MongoDB, Atlas, and Stitch. You will learn about 3 real world examples of two day prototypes and rapid production cycles. You will then create your own free MongoDB Atlas database as a service cluster. Then you will write your first Stitch application to put data into your database and query data out of it. You will learn how to enhance your application with serverless stitch functions and triggers. At the end of the 90 minute session you will have a hands on experience and good grasp of how to write custom serverless applications with MongoDB.
The future of web development write once, run everywhere with angular.js and ...Mark Roden
This slide deck was used in support of BTE 102 - The future of web development write once, run everywhere with angular.js and domino at IBMConnectED 2015
Presentation was given with Mark Leusink
React has been named the front-end library to learn in 2016! React Native has also picked up tremendous steam as a way to build cross-platform apps with React. In this talk, Rami will do a quick 5 minute introduction to React's core concepts. Following, Rami will introduce React Native, discuss the differences between React & React Native, and show you how to build a simple Android application. By the end of this talk, you will have a greater grasp of the ecosystem and leave with new tools in your developer arsenal.
We are at an intersection of 2 paths. One is about the evolution of how we share code between React components, and the second is about how we share data between them.
In this talk, we will explore how we can leverage the power of hooks in global state management, what are the benefits and drawbacks to using Context API, and what alternatives do we have.
React hooks shook the foundation of our React code, and how we think about state management. The long debated Redux vs. MobX theme has shifted to whether context + useReducer is an alternative, and whether state management is necessary at all.
In this talk we will explore how we can use the benefits of hooks in state management, such as separation of concerns, declarative side effects, and simple code reuse.
In this talk, we will see hooks in action!
We will understand why it's such a powerful concept, the motivation behind it, and also the potential risks.
We will explore some implementations of custom hooks, redux integration, and understand how we can benefit from these new APIs today.
Adam is a web developer and consultant and is the CEO of 500Tech. He is a leading community activist and an open sourcerer.
Migrating from angular to react talk slides as given in ReactNext 2018. Link to code is included. The video is available here: https://www.youtube.com/watch?v=NbJy1ZPrVYE
How to write bad code in redux (ReactNext 2018)500Tech
We've been using Redux since it just started, and we learned a lot from dozens of projects, big and small.
This is a taste of a collection of tools and best practices that work great for us.
We've been using Redux since it just started, and we learned a lot from dozens of projects, big and small.
This is a taste of a collection of tools and best practices that work great for us.
Imagine the magic of Angular 1 digest, but extremely performant and smart.
MobX detects changes in plain objects, allowing you to react automatically to changes you make on observable attributes, and define computed values
It’s so easy, you will cry.
In this talk I will introduce MobX and its benefits, and the ng2-mobx library that seamlessly connects it to Angular
A lightning talk about MobX state management solution for Angular single page applications.
The presentation gives a taste about MobX and when it's better than redux.
MobX is a very popular and trending library for state management in frontend applications.
It connects to both React & Angular, and allows you to manage your application's state decoupled from your components, and automagically react to changes in plain objects, auto compute derived values, and more.
Imagine the magic of Angular 1 digest, but extremely performant and smart.
MobX detects changes in plain objects, allowing you to react automatically to changes you make on observable attributes, and define computed values
In this talk I will introduce MobX and its benefits, and the ng2-mobx library I wrote to connect it seamlessly to Angular
This talk covers how to integrate D3 with SVG & Angular to create awesome visualisations, leveraging the modularity of D3 and it's data binding, with angular data binding and the reusability of directives.
Source code for this talk:
https://github.com/adamkleingit/d3-svg-angular
Redux was created less than a year ago for a talk at React conference. It wasn't meant to be a Flux implementation. Nevertheless, its simple and smart principles quickly made Redux the most popular library for Flux architecture. It's straightforward, leverages functional programming principles and is easy to test.
In this talk, you will learn what Flux is, understand the core ideas behind Redux, and see why so many people are falling in love with it. React knowledge (and usage) is not required!
Client side tests in Javascript client side applications.
Best practices & techniques for testing models, controllers and views, as well as integration tests.
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.
UiPath Test Automation using UiPath Test Suite series, part 4DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 4. In this session, we will cover Test Manager overview along with SAP heatmap.
The UiPath Test Manager overview with SAP heatmap webinar offers a concise yet comprehensive exploration of the role of a Test Manager within SAP environments, coupled with the utilization of heatmaps for effective testing strategies.
Participants will gain insights into the responsibilities, challenges, and best practices associated with test management in SAP projects. Additionally, the webinar delves into the significance of heatmaps as a visual aid for identifying testing priorities, areas of risk, and resource allocation within SAP landscapes. Through this session, attendees can expect to enhance their understanding of test management principles while learning practical approaches to optimize testing processes in SAP environments using heatmap visualization techniques
What will you get from this session?
1. Insights into SAP testing best practices
2. Heatmap utilization for testing
3. Optimization of testing processes
4. Demo
Topics covered:
Execution from the test manager
Orchestrator execution result
Defect reporting
SAP heatmap example with demo
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
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.
State of ICS and IoT Cyber Threat Landscape Report 2024 previewPrayukth K V
The IoT and OT threat landscape report has been prepared by the Threat Research Team at Sectrio using data from Sectrio, cyber threat intelligence farming facilities spread across over 85 cities around the world. In addition, Sectrio also runs AI-based advanced threat and payload engagement facilities that serve as sinks to attract and engage sophisticated threat actors, and newer malware including new variants and latent threats that are at an earlier stage of development.
The latest edition of the OT/ICS and IoT security Threat Landscape Report 2024 also covers:
State of global ICS asset and network exposure
Sectoral targets and attacks as well as the cost of ransom
Global APT activity, AI usage, actor and tactic profiles, and implications
Rise in volumes of AI-powered cyberattacks
Major cyber events in 2024
Malware and malicious payload trends
Cyberattack types and targets
Vulnerability exploit attempts on CVEs
Attacks on counties – USA
Expansion of bot farms – how, where, and why
In-depth analysis of the cyber threat landscape across North America, South America, Europe, APAC, and the Middle East
Why are attacks on smart factories rising?
Cyber risk predictions
Axis of attacks – Europe
Systemic attacks in the Middle East
Download the full report from here:
https://sectrio.com/resources/ot-threat-landscape-reports/sectrio-releases-ot-ics-and-iot-security-threat-landscape-report-2024/
The Art of the Pitch: WordPress Relationships and SalesLaura Byrne
Clients don’t know what they don’t know. What web solutions are right for them? How does WordPress come into the picture? How do you make sure you understand scope and timeline? What do you do if sometime changes?
All these questions and more will be explored as we talk about matching clients’ needs with what your agency offers without pulling teeth or pulling your hair out. Practical tips, and strategies for successful relationship building that leads to closing the deal.
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.
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
Let's dive deeper into the world of ODC! Ricardo Alves (OutSystems) will join us to tell all about the new Data Fabric. After that, Sezen de Bruijn (OutSystems) will get into the details on how to best design a sturdy architecture within ODC.
37. ANGULAR2 IS A NEW FRAMEWORK
- built from scratch to be a development platform
- dedicated team at google and around the world
- currently in BETA 3
38. TARGETING DESKTOP & MOBILE
- Abstract rendering layer
- Server side rendering
- Natural native-script support
39. CUTTING EDGE TECHNOLOGIES
- Use of WebWorkers
- Shadow DOM components
- server-side pre-rendering, offline compile
47. ALL ASPECTS OF MODERN WEB APPS
- Animation module (js, css & Web animation API)
- Internationalization (I18N) & accessibility
- Powerful component router
- Form system - (two-way data binding,
change tracking, validation, and error handling)
48. ABSTRACTIONS
- Http module for server-side communication
- Dependency injection for modularity and testability
- Core directives for declarative dynamic templates
50. Released 2013 (2+ years)
Used extensively in production
https://github.com/facebook/react/
wiki/Sites-Using-React
REAL WORLD USE
Beta 3 Released in 2016
currently used in production only
inside of Google
51. • Massive adoption abroad by startups
and companies
• Initial adoption in Israel
• Active and growing React community
• Multiple companies started PoC
the technology
• Initial adoption in Israel
• Community interest exploding
DEVELOPERS
52. • Active and growing React community
• Huge amounts of quality Courses &
Books
• Community interest exploding
• official conferences in Europe &
USA
• large amount of angular local
communities around the world
• massive amount of Books, Videos,
Tutorials, Courses and posts
COMMUNITY
53.
54.
55.
56. • Gradual small improvements
• Easy upgrade path (angular hah!)
• milestones and development
process (public)
• tutorials and tools for easier
migration from angular 1.x
• dedicate team of 28 google
engineers +community
contributors
ROADMAP
57. • Extensive eco system
• Components for every need
• Growing eco system
• Angular 1.x components are
currently in migration process
• Easy integration with components
made in other frameworks /
libraries
3RD PARTY
59. • ES6/7 Focused
• TypeScript adding extensive JSX
support
• ES6 / TypeScript focused (ES5 and
Dart as well)
• Standart HTML / CSS (react??)
LANGUAGE
61. • What is VirtualDOM • encapsulated structure and style
• part of web components spec
• exciting technology (not invented..)
VIRTUAL / SHADOW DOM
62. • JSX - Next slide • Standart JavaScript - (.js or .ts)
• Standard HTML - can be written as
a separate file, valid, (.html)
• Standard CSS - can be written as a
separate file, valid (.css)
• directives - declarative abstractions,
extends element behaviour.
• bind to native element properties
and events - no wrappers!
TEMPLATE ENGINES
63. JSX
<div>
<Component />
<h1>Regular HTML tags</h1>
<Hello title=‘React rules!’/>
<ComponentWithChildren>
<StuffInside />
Some text with { 4 - 3 } expressions in it.
</ComponentWithChildren>
</div>
64. Components
const Hello = ({ title }) => <h1>{ title }</h1>;
hello.jsx
hello.css
h1 {
font-weight: bold;
}
66. • FLUX • Zone.js - proxy for all the async
methods in the browser
• two-way, one-way, one-time
binding mechanism
• Flux, RxJS (streaming) and ‘classic’
Model style data flows
• No $digest, $apply, $scope,
$watch
CHANGE DETECTION
67. • No need for browser
• Mocking tools
• Build in E2E (click())
(next slide)
• No need for browser
• Mocking tools out of the box
• Testable from the ground up thanks
to dependency injection
TESTS
70. Server rendering
import { renderToString } from ‘react-dom/server';
// Render the component to a string
const html = renderToString(
<div>
<h1>Hello from the server!</h1>
</div>
);
import { render } from ‘react-dom';
render(
<div>
<h1>Hello from the server!</h1>
</div>,
document.getElementById('app')
);
71. • React Native
• Same code on Android & iOS
• Using Native Components!
• No crappy WebView wrappers (ionic/
cordova/etc)
• Server side rendering for web-
mobile
• Natural integration with native-
script (native components, no
cordova)
MOBILE
72. • React Chrome extension
• Easy “state” inspection
• Great action replay with redux
• redux dev tool for redux
• built-in inspection tool
• TypeScript support through IDE’s
and sourceMaps
https://github.com/gaearon/redux-devtools
DEBUGGING
75. Angular is a development platform
aimed for modern most demanding
web and mobile applications.
Angular2 built from several modules
working together to supply high level
abstractions and API’s for building
complex applications with ease.
Nuth said
FINAL WORDS
76. We are looking for
rockstars to join our band
jobs@500tech.com
HIRING