90-minute October 2015 Los Angeles CTO Forum presentation on AngularJS, other JavaScript frameworks including ReactJS, and the state of web development in 2015.
Topics covered:
- State of web development in 2015
- AngularJS code examples
- Analysis of JavaScript MVC frameworks suitable for 2015-2019 development
- AngularJS pros/cons
- ReactJS
- Hybrid mobile apps
Learning AngularJS - Complete coverage of AngularJS features and conceptsSuresh Patidar
AngularJS learning sessions tailored for 6 days/12 hours. Complete coverage of AngularJS features that will be helpful for both beginner as well as expert. Also covers common development use cases and their answer/solution in AngularJS. A good coverage on tooling required for development and testing.
Top Web Development Frameworks Comparison: All You Need To KnowPixel Crayons
Each web development framework has its own pros and cons. It depends upon the businesses which framework they want to use. However, before coming to any conclusion, it is always suggested to analyze your business goals, target user-base, and budget. The best web development framework should be selected based on your needs and requirements.
A Lecture given in Aalto University course "Design of WWW Services".
Single page app is already several years old web application paradigm that is now gaining traction due to the interest towards HTML5 and particularly cross-platform mobile (web) applications. The presentation overviews the single page application paradigm and compares it with other web app paradigms.
The presentation uses Backbone.js as the sample and gives practical tips on how to best structure Backbone.js applications. It contains an extensive set of tips and links in the notes section.
The reader is adviced to download the presentation for better readability of the notes.
HTML5 and the dawn of rich mobile web applicationsJames Pearce
HTML5 and its related technologies are enabling new ways to build beautiful sites and applications for contemporary mobile devices. Native mobile developers can now use web technologies to surmount cross-platform headaches, and desktop web developers can reach mobile users in familiar, app-like ways. This session explores the state of the art in HTML5-based mobile web frameworks, and demonstrates the practical possibilities that this powerful and standards-based approach can bring.
Learning AngularJS - Complete coverage of AngularJS features and conceptsSuresh Patidar
AngularJS learning sessions tailored for 6 days/12 hours. Complete coverage of AngularJS features that will be helpful for both beginner as well as expert. Also covers common development use cases and their answer/solution in AngularJS. A good coverage on tooling required for development and testing.
Top Web Development Frameworks Comparison: All You Need To KnowPixel Crayons
Each web development framework has its own pros and cons. It depends upon the businesses which framework they want to use. However, before coming to any conclusion, it is always suggested to analyze your business goals, target user-base, and budget. The best web development framework should be selected based on your needs and requirements.
A Lecture given in Aalto University course "Design of WWW Services".
Single page app is already several years old web application paradigm that is now gaining traction due to the interest towards HTML5 and particularly cross-platform mobile (web) applications. The presentation overviews the single page application paradigm and compares it with other web app paradigms.
The presentation uses Backbone.js as the sample and gives practical tips on how to best structure Backbone.js applications. It contains an extensive set of tips and links in the notes section.
The reader is adviced to download the presentation for better readability of the notes.
HTML5 and the dawn of rich mobile web applicationsJames Pearce
HTML5 and its related technologies are enabling new ways to build beautiful sites and applications for contemporary mobile devices. Native mobile developers can now use web technologies to surmount cross-platform headaches, and desktop web developers can reach mobile users in familiar, app-like ways. This session explores the state of the art in HTML5-based mobile web frameworks, and demonstrates the practical possibilities that this powerful and standards-based approach can bring.
Comparison of JSF (PrimeFaces), JSF (ADF/ Essentials), Vaadin, JHipster and JVx.
Some details: http://blog.sibvisions.com/2015/06/10/java-framework-comparison-and-jvx/
This presentation is about building Single Page Applications. It was written for a .NET Meetup in Uruguay, so it will also be targeted at Microsoft developers.
React vs angular which front end framework should you choose and whyKaty Slemon
React Vs Angular: Choose the best front-end development framework. Find out their comparison in performance, community, scalability and when to use which one.
I am a Java Professional with 8 years of experience in j2ee, worked on MVC design pattern with struts 2.0 and spring frameworks. With design exposure in AJAX , JQuery and Javascript.Used SVN,Jenkins for contiuous integration of models
React js, node js & angular js which one is the best for web development Concetto Labs
Concetto Labs is the best React JS, Node JS and Angular JS development company India. We help you to choose the best JavaScript framework. Contact Us Now
AngularJS - Javascript framework for superheroesVincenzo Ferrari
PDF version of the AngularJS talk @DrupalDaysIT 2014
HTML version: http://wilk.github.io/AngularJS-Javascript-framework-for-superheroes/
Repository: https://github.com/wilk/AngularJS-Javascript-framework-for-superheroes
Comparison of JSF (PrimeFaces), JSF (ADF/ Essentials), Vaadin, JHipster and JVx.
Some details: http://blog.sibvisions.com/2015/06/10/java-framework-comparison-and-jvx/
This presentation is about building Single Page Applications. It was written for a .NET Meetup in Uruguay, so it will also be targeted at Microsoft developers.
React vs angular which front end framework should you choose and whyKaty Slemon
React Vs Angular: Choose the best front-end development framework. Find out their comparison in performance, community, scalability and when to use which one.
I am a Java Professional with 8 years of experience in j2ee, worked on MVC design pattern with struts 2.0 and spring frameworks. With design exposure in AJAX , JQuery and Javascript.Used SVN,Jenkins for contiuous integration of models
React js, node js & angular js which one is the best for web development Concetto Labs
Concetto Labs is the best React JS, Node JS and Angular JS development company India. We help you to choose the best JavaScript framework. Contact Us Now
AngularJS - Javascript framework for superheroesVincenzo Ferrari
PDF version of the AngularJS talk @DrupalDaysIT 2014
HTML version: http://wilk.github.io/AngularJS-Javascript-framework-for-superheroes/
Repository: https://github.com/wilk/AngularJS-Javascript-framework-for-superheroes
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.
Deloitte's report and point of view on IBM's Watson. IBM Watson, AI, Cognitive Computing are rapidly evolving technologies that can support and enhance enterprise solutions. Learn about IBM Watson the Why? and the How?
Pohjois-Karjala: Uusiutuvan energian ja energiatehokkuuden hyvät käytännötUlla Ala-Ketola
Uusiutuvan energian ja energiatehokkuuden hyviä käytäntöjä Pohjois-Karjalasta. Näissä ratkaisukorteissa kerrotaan toimenpiteen tekijä, investoinnin suuruus sekä säästö- ja päästövaikutukset. Toimenpiteet ovat osa HINKU-osahanketta (PK-HINKU) Kohti öljyvapaata ja vähähiilistä Pohjois-Karjalaa, jonka toteuttajina toimivat Pohjois-Karjalan maakuntaliitto ja Suomen ympäristökeskus SYKE.
Ring rolling machines are suitable for producing rings for the following applications: Flanges, Bearings, Gears, Wheels, Sleeves, Rings in the automobile, aerospace, oil & gas industry etc.
Steven
Anyang Forging Press Machine Industry Co.,Ltd
steven@chinesehammers.com
www.chinesehammers.com
Should Denmark adopt euro? Strong euro may get in trouble for exporters , like Denmark, and discourage foreign investment in the euro zone, but helps importers and euro zone investments around the world.
The SkillGigs 3D Resume - Making Hiring EasierSkillGigs
SkillGigs -- the next generation job marketplace for tech talent -- is changing the way companies hire! Using our patented AI recruiting technology, Robo Recruiter, SkillGigs helps you recruit A-list Tech Talent for both permanent and contract positions faster and at a lower cost. The SkillGigs 3D Resume is revolutionizing the world of resumes. Employers can now tell if a candidate is the right fit for their positions in 30 seconds or less while candidates are given a tool that allows them to stand out. It's just one of the many benefits of using SkillGigs.
Top Reasons to Choose AngularJS as your Front-end FrameworkQSS Technosoft
AngularJS is one of the best development frameworks to use for front-end development services. Most developers use AngularJS to make the projects effective with unique features and functionalities.
Comparison Between React Vs Angular.pdfStephieJohn
From our experience, we find both Angular and React frameworks are high-performance JavaScript frameworks, providing comprehensive web app development capabilities. With this comparison, you can choose the ideal frame for your web app development project offered by Lia Infraservices.
AngularJS has been designed to build front-end of web applications easily.Take your time to learn the frameworks to understand how the pieces fit together.
Albiorix Technology lists out the best Javascript frameworks to use in 2023. Learn more about selecting the proper Javascript framework for your business needs.
For More Information: https://www.albiorixtech.com/blog/best-javascript-frameworks/
#JavaScript #JavaScriptFrameworks #WebAppDevelopment #MobileAppDevelopment #SoftwareDevelopment
In this comprehensive guide, Angular is described as a one-stop solution for front-end development. Learn everything there is to know about Angular, including how it works, why, and the benefits.
In this presentation, I presented how to build an angular JS Application with SPA in mind and also make sure you use up all the available concepts to create versatile and creative web application with less boilerplate javascript code.
7 effective reasons why you should use angular js for mobile app developmentMoon Technolabs Pvt. Ltd.
AngularJs is widely considered as the finest framework for developing single-page applications and the web app - this guide will conclude the benefits.
Looking for the best backend frameworks for web development? Discover the top 5 options in our informative .pptx presentation. From robust features to seamless integration, streamline your development process with Silverclouding and stay ahead in the digital era.
How to choose the best frontend framework in 2022Katy Slemon
Take a look at most in-demand and best frontend frameworks and libraries for the year 2022 based on awareness, company size, overall satisfaction and interest.
JavaScript frameworks play a crucial role in developing web and mobile applications. Albiorix Technology has compiled statistics on the popularity and usage of these frameworks for 2023.
For a deeper understanding, please visit the article: https://www.albiorixtech.com/blog/javascript-frameworks-popularity/
What are the key distinctions between Angular and AngularJS?Albiorix Technology
What distinguishes Angular from AngularJS? Do they actually differ from one another? Learn more about the distinctions between Angular and AngularJS and also know about what kind of frameworks are, what are their features, and learn about their architecture, and their pros, and cons. Let's know which one is better: Angular Vs AngularJS, in this presentation. Did we miss anything? Please contact us and share your points.
Reference: https://www.albiorixtech.com/blog/angular-vs-angularjs/
Comparing AngularJS and ReactJS_ Finding the Best Framework for your Next Pro...JPLoft Solutions
React is a web-based JavaScript library that lets designers design user interfaces with the assistance of UI components. React uses server-side rendering, an effective and flexible method for creating UI. It allows developers to develop fluid UX and intricate UI. To offer a satisfying user experience and UI, you will get the top service provided by React front-end development services.
AngularJs and ReactJs both frameworks have great support for their communities but before choosing any, consider your requirement, functionality, and usability.
Similar to AngularJS in Production (CTO Forum) (20)
Understanding Globus Data Transfers with NetSageGlobus
NetSage is an open privacy-aware network measurement, analysis, and visualization service designed to help end-users visualize and reason about large data transfers. NetSage traditionally has used a combination of passive measurements, including SNMP and flow data, as well as active measurements, mainly perfSONAR, to provide longitudinal network performance data visualization. It has been deployed by dozens of networks world wide, and is supported domestically by the Engagement and Performance Operations Center (EPOC), NSF #2328479. We have recently expanded the NetSage data sources to include logs for Globus data transfers, following the same privacy-preserving approach as for Flow data. Using the logs for the Texas Advanced Computing Center (TACC) as an example, this talk will walk through several different example use cases that NetSage can answer, including: Who is using Globus to share data with my institution, and what kind of performance are they able to achieve? How many transfers has Globus supported for us? Which sites are we sharing the most data with, and how is that changing over time? How is my site using Globus to move data internally, and what kind of performance do we see for those transfers? What percentage of data transfers at my institution used Globus, and how did the overall data transfer performance compare to the Globus users?
AI Pilot Review: The World’s First Virtual Assistant Marketing SuiteGoogle
AI Pilot Review: The World’s First Virtual Assistant Marketing Suite
👉👉 Click Here To Get More Info 👇👇
https://sumonreview.com/ai-pilot-review/
AI Pilot Review: Key Features
✅Deploy AI expert bots in Any Niche With Just A Click
✅With one keyword, generate complete funnels, websites, landing pages, and more.
✅More than 85 AI features are included in the AI pilot.
✅No setup or configuration; use your voice (like Siri) to do whatever you want.
✅You Can Use AI Pilot To Create your version of AI Pilot And Charge People For It…
✅ZERO Manual Work With AI Pilot. Never write, Design, Or Code Again.
✅ZERO Limits On Features Or Usages
✅Use Our AI-powered Traffic To Get Hundreds Of Customers
✅No Complicated Setup: Get Up And Running In 2 Minutes
✅99.99% Up-Time Guaranteed
✅30 Days Money-Back Guarantee
✅ZERO Upfront Cost
See My Other Reviews Article:
(1) TubeTrivia AI Review: https://sumonreview.com/tubetrivia-ai-review
(2) SocioWave Review: https://sumonreview.com/sociowave-review
(3) AI Partner & Profit Review: https://sumonreview.com/ai-partner-profit-review
(4) AI Ebook Suite Review: https://sumonreview.com/ai-ebook-suite-review
Climate Science Flows: Enabling Petabyte-Scale Climate Analysis with the Eart...Globus
The Earth System Grid Federation (ESGF) is a global network of data servers that archives and distributes the planet’s largest collection of Earth system model output for thousands of climate and environmental scientists worldwide. Many of these petabyte-scale data archives are located in proximity to large high-performance computing (HPC) or cloud computing resources, but the primary workflow for data users consists of transferring data, and applying computations on a different system. As a part of the ESGF 2.0 US project (funded by the United States Department of Energy Office of Science), we developed pre-defined data workflows, which can be run on-demand, capable of applying many data reduction and data analysis to the large ESGF data archives, transferring only the resultant analysis (ex. visualizations, smaller data files). In this talk, we will showcase a few of these workflows, highlighting how Globus Flows can be used for petabyte-scale climate analysis.
Experience our free, in-depth three-part Tendenci Platform Corporate Membership Management workshop series! In Session 1 on May 14th, 2024, we began with an Introduction and Setup, mastering the configuration of your Corporate Membership Module settings to establish membership types, applications, and more. Then, on May 16th, 2024, in Session 2, we focused on binding individual members to a Corporate Membership and Corporate Reps, teaching you how to add individual members and assign Corporate Representatives to manage dues, renewals, and associated members. Finally, on May 28th, 2024, in Session 3, we covered questions and concerns, addressing any queries or issues you may have.
For more Tendenci AMS events, check out www.tendenci.com/events
Listen to the keynote address and hear about the latest developments from Rachana Ananthakrishnan and Ian Foster who review the updates to the Globus Platform and Service, and the relevance of Globus to the scientific community as an automation platform to accelerate scientific discovery.
Exploring Innovations in Data Repository Solutions - Insights from the U.S. G...Globus
The U.S. Geological Survey (USGS) has made substantial investments in meeting evolving scientific, technical, and policy driven demands on storing, managing, and delivering data. As these demands continue to grow in complexity and scale, the USGS must continue to explore innovative solutions to improve its management, curation, sharing, delivering, and preservation approaches for large-scale research data. Supporting these needs, the USGS has partnered with the University of Chicago-Globus to research and develop advanced repository components and workflows leveraging its current investment in Globus. The primary outcome of this partnership includes the development of a prototype enterprise repository, driven by USGS Data Release requirements, through exploration and implementation of the entire suite of the Globus platform offerings, including Globus Flow, Globus Auth, Globus Transfer, and Globus Search. This presentation will provide insights into this research partnership, introduce the unique requirements and challenges being addressed and provide relevant project progress.
How to Position Your Globus Data Portal for Success Ten Good PracticesGlobus
Science gateways allow science and engineering communities to access shared data, software, computing services, and instruments. Science gateways have gained a lot of traction in the last twenty years, as evidenced by projects such as the Science Gateways Community Institute (SGCI) and the Center of Excellence on Science Gateways (SGX3) in the US, The Australian Research Data Commons (ARDC) and its platforms in Australia, and the projects around Virtual Research Environments in Europe. A few mature frameworks have evolved with their different strengths and foci and have been taken up by a larger community such as the Globus Data Portal, Hubzero, Tapis, and Galaxy. However, even when gateways are built on successful frameworks, they continue to face the challenges of ongoing maintenance costs and how to meet the ever-expanding needs of the community they serve with enhanced features. It is not uncommon that gateways with compelling use cases are nonetheless unable to get past the prototype phase and become a full production service, or if they do, they don't survive more than a couple of years. While there is no guaranteed pathway to success, it seems likely that for any gateway there is a need for a strong community and/or solid funding streams to create and sustain its success. With over twenty years of examples to draw from, this presentation goes into detail for ten factors common to successful and enduring gateways that effectively serve as best practices for any new or developing gateway.
How Recreation Management Software Can Streamline Your Operations.pptxwottaspaceseo
Recreation management software streamlines operations by automating key tasks such as scheduling, registration, and payment processing, reducing manual workload and errors. It provides centralized management of facilities, classes, and events, ensuring efficient resource allocation and facility usage. The software offers user-friendly online portals for easy access to bookings and program information, enhancing customer experience. Real-time reporting and data analytics deliver insights into attendance and preferences, aiding in strategic decision-making. Additionally, effective communication tools keep participants and staff informed with timely updates. Overall, recreation management software enhances efficiency, improves service delivery, and boosts customer satisfaction.
Into the Box Keynote Day 2: Unveiling amazing updates and announcements for modern CFML developers! Get ready for exciting releases and updates on Ortus tools and products. Stay tuned for cutting-edge innovations designed to boost your productivity.
Globus Compute wth IRI Workflows - GlobusWorld 2024Globus
As part of the DOE Integrated Research Infrastructure (IRI) program, NERSC at Lawrence Berkeley National Lab and ALCF at Argonne National Lab are working closely with General Atomics on accelerating the computing requirements of the DIII-D experiment. As part of the work the team is investigating ways to speedup the time to solution for many different parts of the DIII-D workflow including how they run jobs on HPC systems. One of these routes is looking at Globus Compute as a way to replace the current method for managing tasks and we describe a brief proof of concept showing how Globus Compute could help to schedule jobs and be a tool to connect compute at different facilities.
Software Engineering, Software Consulting, Tech Lead.
Spring Boot, Spring Cloud, Spring Core, Spring JDBC, Spring Security,
Spring Transaction, Spring MVC,
Log4j, REST/SOAP WEB-SERVICES.
Innovating Inference - Remote Triggering of Large Language Models on HPC Clus...Globus
Large Language Models (LLMs) are currently the center of attention in the tech world, particularly for their potential to advance research. In this presentation, we'll explore a straightforward and effective method for quickly initiating inference runs on supercomputers using the vLLM tool with Globus Compute, specifically on the Polaris system at ALCF. We'll begin by briefly discussing the popularity and applications of LLMs in various fields. Following this, we will introduce the vLLM tool, and explain how it integrates with Globus Compute to efficiently manage LLM operations on Polaris. Attendees will learn the practical aspects of setting up and remotely triggering LLMs from local machines, focusing on ease of use and efficiency. This talk is ideal for researchers and practitioners looking to leverage the power of LLMs in their work, offering a clear guide to harnessing supercomputing resources for quick and effective LLM inference.
Accelerate Enterprise Software Engineering with PlatformlessWSO2
Key takeaways:
Challenges of building platforms and the benefits of platformless.
Key principles of platformless, including API-first, cloud-native middleware, platform engineering, and developer experience.
How Choreo enables the platformless experience.
How key concepts like application architecture, domain-driven design, zero trust, and cell-based architecture are inherently a part of Choreo.
Demo of an end-to-end app built and deployed on Choreo.
Code reviews are vital for ensuring good code quality. They serve as one of our last lines of defense against bugs and subpar code reaching production.
Yet, they often turn into annoying tasks riddled with frustration, hostility, unclear feedback and lack of standards. How can we improve this crucial process?
In this session we will cover:
- The Art of Effective Code Reviews
- Streamlining the Review Process
- Elevating Reviews with Automated Tools
By the end of this presentation, you'll have the knowledge on how to organize and improve your code review proces
Navigating the Metaverse: A Journey into Virtual Evolution"Donna Lenk
Join us for an exploration of the Metaverse's evolution, where innovation meets imagination. Discover new dimensions of virtual events, engage with thought-provoking discussions, and witness the transformative power of digital realms."
Large Language Models and the End of ProgrammingMatt Welsh
Talk by Matt Welsh at Craft Conference 2024 on the impact that Large Language Models will have on the future of software development. In this talk, I discuss the ways in which LLMs will impact the software industry, from replacing human software developers with AI, to replacing conventional software with models that perform reasoning, computation, and problem-solving.
2. Topics
Please ask questions!
1. Who am I and what is Enplug?
2. Web development in 2015
3. AngularJS examples
4. JS frameworks
a. Considerations
b. Options
c. AngularJS
d. Angular 2.0 (upcoming)
5. React by Facebook
6. Hybrid mobile apps
7. Resources
4. Alex Ross
Full-stack web developer &
mobile developer
● JavaScript
● HTML 4-5
● CSS 2, 3, and SASS
● The Internet: DNS, HTTP, sockets,
CDNs, LB, etc
● PHP & ZendFramework
● Apache
● MongoDB
● MySQL
● Objective-C (OSX & iOS)
● RabbitMQ
● Android & Java
● Ruby (some Rails)
● Python
● PhoneGap / Apache Cordova
5. Enplug
Los Angeles-based tech
company
● Founded in 2012
● $5M in seed funding
● 20 employees
● B2B SaaS software
● 500+ customers
● Doing for digital displays what
Wordpress did for websites, or Shopify
did for e-commerce
10. ● Browser inconsistencies less of a serious issue for n-1 browsers
● JavaScript rapidly maturing (ES2015)
● HTML5 works well
● CSS3 works great
● Tools: maturing package managers, build automation, etc.
● Client-side data storage: IndexedDB for significant amounts of
structured data, localstorage for simple key-value.
● Multi-threading: web workers (but still haven’t seen a good core use)
● Impressive improvements forthcoming: web components, class-based
inheritance, modules, and much more.
Things are looking up
14. Static pages
Server generated
pages
JavaScript DOM
manipulation
(imperative)
Fastest initial page load. But, must re-render
entire page to reflect changes in data.
Programmer manually updates specific parts
of the page without entire re-render when data
changes. Much smoother.
JavaScript data
binding
(declarative)
Same as above, except the framework
observes data and does the DOM
manipulation when data changes. Less work
for the programmer.
16. AngularJS is a JavaScript framework sponsored by Google that takes much of what was once done
exclusively on servers, and puts it in the front-end. It is 100% JavaScript, 100% client-side.
Concepts: Routing, templating, dependency injection, code architecture (factories, singletons, scopes,
MVVM) and more.
Why do some people put so much in the front-end? Speed and separation of concerns. It’s faster to
update a part of a page than an entire page, and some people believe the client/browser should handle all
UI while the server provides APIs for the browser, mobile devices and other clients.
Why so much in the front-end?
17. Patterns of organizing software into separate responsibilities in order facilitate faster and
more stable development, also making it easier to maintain projects over time.
MVC: Model-View Controller
MVVM: Model-View View-Model
The simple difference: the view model is used to two-way bind data from the model
(server) to the view (browser) using JavaScript. In practice, MVVM still usually has
controllers to control overall logic.
Design patterns: MVC and MVVM
23. The model: services
● Services are dependency-injected into
controllers and contain the app logic.
● Services hold the model. They read data
and persist changes.
● Controllers should be as thin as possible
(zero logic), only bring logic together.
● Controllers trigger model <=> view
updates.
29. Directive example: location-aware
location-aware.js
Marking current location as active
for better UX: very common app-
wide requirement.
● element
● attributes
● event system
JS functionality invoked on
element by directive location-
aware.
34. Project structure
● Small projects: code organized by file type
○ controllers, templates, services, etc.
● Bigger projects: code organized by module, then file
type. Requires build automation.
● Distribution: concat, minify, obfuscate, etc:
35. JS frameworks
Is a front-end framework (and AngularJS) right for
your team? Perhaps
36. Q: Should my front-end app leverage data binding and reusable components?
A: New projects: yes. Existing projects: eventually yes.
Q: Should I use a framework for this?
A: Yes, unless you’re committed to reinventing many common components of an SPA
Q: Which framework should I use if I don’t already have one?
A: As of October 2015, AngularJS, EmberJS or BackboneJS
Boiling it down: questions to start with
37. Single page apps (SPA) need proper code architecture (count the UI components)
38. 1. To reduce boilerplate: let framework subroutines handle the nitty-gritty like routing, form validation,
data binding, dependency injection, XHR requests, etc.
2. To leverage common knowledge: use existing patterns and best practices
3. To reduce ramp-up: a strong ecosystem of documentation, tutorials, blog posts, and training
programs (e.g. Lynda) means you need to document and explain less of your app to new
developers.
Big-picture reasons to use a framework
Takeaway: frameworks can help manage complexity
39. 1. Data binding and reusable components are good ideas; little benefit to home-rolling them.
2. Your CRUD app is not that different from other apps. Key architectural pieces like routing, or base
components like dropdowns, are functionally the same as other apps so you can leverage some
work that has already been done.
3. The AngularJS team is exceptional and has moved web development forward with both original
and well-implemented existing ideas. You want to leverage their expertise, particularly if you don’t
fully understand what they did. I believe the individual people behind Angular are the biggest and
most subtle difference that set AngularJS apart over the last 5 years.
Reasons specific to front-end development
40. 1. AngularJS: opinionated, strict MV* implementation (2009)
2. Ember: similar to AngularJS. Even more opinionated. (2007)
3. Backbone: philosophically minimalist (2010)
4. ExtJS: requires license, much “heavier” framework (2007)
5. Others: Knockout, SproutCore, Spine, Javascript MVC, GWT, Batman, etc all once popular in 2011-
2013 probably aren’t safe options for 2015-2019+ development
JavaScript MVVM & MVC framework options
jQuery: library/tool (not a framework) and increasingly unnecessary
React (by Facebook): only addresses the “View” part of MVC
41. 1. AngularJS:
a. Pros: more approachable and simpler syntax. More flexible than Ember, more complete than
Backbone. No 3rd party dependencies. More learning materials & larger community.
b. Cons: more concepts to learn in order to master.
2. Ember:
a. Pros: stricter framework, less concepts. Potentially more performant data-binding.
b. Cons: less documentation/community, requires jQuery & Handlebars (larger)
3. Backbone:
a. Pros: lightweight, easy learning curve, very flexible.
b. Cons: you’ll build your own framework on top of it. Routing, templates, dependency injection,
two-way binding etc. Requires jQuery & Underscore.
Frameworks narrowed down
42. AngularJS is (or was) the 3rd-most starred project on Github. Source: AirPair.com, April 2015
Community comparison
49. ● Built for CRUD apps: not games or GUI editors.
● A complete client-side solution: guides developers through full process and best practices of
building an app.
● Opinionated: serves as a starting point for how apps should be built.
● Simplifies development by providing a higher level of abstraction at the cost of flexibility.
● All code in an app should be testable
● Less boilerplate: “Make common tasks trivial and difficult tasks possible”
● Enhances HTML using custom HTML tags/components which trigger JavaScript functionality.
Philosophy
“AngularJS is what HTML would have been, had it been designed for applications”
50. 1. It’s made up of well thought-out components
2. Developer support: Mature documentation, tutorials, blog posts & formal courses.
3. Community is mature & thriving. Many high quality 3rd party modules & expert opinion available.
4. Directives (UI components) are brilliant: also come with a high learning curve (worth it)
5. Continual improvement: recent versions have addressed many key concerns
6. It’s efficient: fairly lightweight
Why AngularJS?
51. 1. Handles low-level DOM manipulation and marshals data to the UI (data binding)
2. Wires MV* app components together with a clean, modular, reusable architecture
3. Templating: supports complex view hierarchies
4. Dependency injection
5. Routing
6. Form data & validation
7. API requests (XHR)
8. Makes i18n convenient (internationalization)
9. Extensible: can integrate with any other JavaScript/HTML/CSS 3rd party component
Key features
52. 1. SEO: Single page apps are un-indexable. Unsuitable for websites or public-facing apps (like
Craigslist, Amazon).
2. Difficult to test logic in HTML: ng-repeat, ng-show, etc.
3. Legacy browser support: IE9+
4. Lazy-loading modules: possible but not very easy
5. Maintaining state between page reloads. Cookies, localstorage, AJAX
6. Sometimes, it’s too fast: requires fine-tuning to “feel right” to web users
7. Works best with JSON apis: it’s more difficult to use XML or HTML server responses
8. Doesn’t play nicely with server templating: Smarty, Twig, Liquid, etc.
9. Complexity: directives, prototypical inheritance, transclusion, digest, etc. can be difficult concepts.
Why not AngularJS?
All of these gotchas are overcomeable with varying degrees of work. Many of these apply to all SPAs.
53. ● In alpha without a release date (details expected soon at ngEurope in Oct).
● Angular 1.x will be supported for 2 years after 2.0 release.
● Lighter (and simpler?) than Angular 1
● Big gamble: great ideas, very different. “Built for the browsers of the future”.
● Responding to changes in browsers: the web standards body is adding much of what AngularJS
makes possible to browsers. So, Angular 2.0 will do what future browsers won’t.
● Typed JavaScript: embraces TypeScript, a typed superset of JS by Microsoft.
Angular 2.0: bold as hell
Takeaway: My bet is Angular 2.0 will rock… eventually. New apps: Angular 1.x with an eye on
2.0 changes. Existing app rewrites: hold off
54. 1. Written in ES6 (with class-based inheritance), transpiles to ES5 for current browser compatibility.
2. Moving away from the (confusing) JS prototypical inheritance model
3. No more controllers or $scope (concepts remain)
4. Simpler directives
5. Uses ES6 modules instead of custom Angular modules
6. No longer includes jQuery by default
7. Unidirectional data flow (no more two-way binding, more explicit, similar to React?)
8. No more $scope.$apply
9. Better support for touch animations
10. New router
11. New persistence layer
12. … and more
Some Angular 2.0 details
55. 1. Bower: web package manager for 3rd party project dependencies.
2. Grunt: build automation tool. Automate tasks like code minification/obfuscation, code-quality
analysis, versioning, vendor-prefixing, unit testing, releasing, and so much more.
3. SASS (not LESS): Always use a CSS preprocessor these days. SASS seems to have won out over
LESS, with Bootstrap switching.
4. gzipping & CDNs (CloudFlare for easy setup): low-hanging fruit for much faster load times.
5. Yeoman: scaffolding tool for new apps.
6. Firebase: solid database-as-a-service, recently acquired by Google (not only for Angular)
7. Amazon S3 + CloudFlare: extremely easy app hosting for 100% static apps
8. Babel: ES2015 compiler (e.g. use classes now)
Tools that go well with AngularJS
58. ● (-) Alpha software (0.13.x): still has breaking changes
● (-) Tiny community & docs: you’ll be trailblazing
● (-) Has a learning curve: may be worth the complexity
● (+) Not too difficult to use: once you understand
● (+) Interoperable: can be used with AngularJS and other frameworks
● (+) Performance impact: needs to be demonstrated. Seems negligible for
typical CRUD apps without large quantities of data in the client.
● (?) Questionable philosophy: HTML in JS? Worth considering
React by Facebook: a virtualized DOM
Core concept: put your HTML into your JavaScript. When your data changes, React performs a diff on
changed HTML and only updates the elements that were affected.
Pros: 1.) faster HTML updates, 2.) “easier to understand UI components because they’re in one file”
60. 1. Apache Cordova (PhoneGap): runs in a webview.
2. Appcelerator Titanium: JS interpreted at runtime, connects to native
bindings (no webview). Includes ecosystem of app support tools.
3. React Native: ReactJS, for mobile. Technically similar to Titanium.
4. Ionic Framework: commercial product that uses Cordova+AngularJS.
Growing quickly and worth a look. Includes ecosystem of app support
tools, including pre-built UI controls.
HTML5 hybrid mobile app options
Takeaway: I still wouldn’t advise using web tools to create mobile apps, because at a high level:
1.) Creating a native mobile app just really isn’t that hard if you’re serious about it.
2.) iOS and Android are too different and evolve too quickly to keep up with on an abstracted platform.
61. 1. Angular 2.0 breakdown: https://www.airpair.com/angularjs/posts/preparing-for-the-future-of-angularjs
2. How to write good controllers: http://toddmotto.com/rethinking-angular-js-controllers/
3. Performance tips: https://www.airpair.com/angularjs/posts/angularjs-performance-large-applications
4. More perf. tips: http://blog.scalyr.com/2013/10/angularjs-1200ms-to-35ms/
5. JS Style guide: https://github.com/airbnb/javascript
6. Why not to use Angular: https://medium.com/@mnemon1ck/why-you-should-not-use-angularjs-1df5ddf6fc99
7. Angular alts: https://medium.com/este-js-framework/what-i-would-recommend-instead-of-angular-js-62b057d8a9e
8. Ember v.s. Angular: https://www.quora.com/Is-Angular-js-or-Ember-js-the-better-choice-for-JavaScript-frameworks
9. Me! I’m happy to help anybody in the CTO Forum
Thank you! Here are some resources
caniuse.com and automation + css auto prefixer to help equalize
constant stream of improvements due to evergreen
IE took a giant leap forward with IE 10
Safari includes iOS (2% desktop), Chrome includes Chrome for Android (16% v.s. 29%)
Safari on Mac only not auto-updating (evergreen) browser
2016: only most recent IE for OS gets support and security updates (Vista still on IE9)
you can accomplish the same things in all frameworks
Ember is more opinionated (example: CLI tool for scaffolding)
Knockout: syntax is messy, no DI, routing, services, filters, etc
Backbone: no templating engine
Ember and Backbone require jQuery plus another library (Underscore/Handlebars)