The document discusses transitioning from Java to AngularJS. It covers AngularJS concepts like MVC, controllers, directives, dependency injection, routing and nested views. It also mentions best practices, downsides, and provides a link to sample code. The presentation encourages live editing code in the browser and using AngularJS features to build maintainable and testable applications.
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?
There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.
Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
https://reactadvanced.com/workshops-3h
Ember.js is an opinionated web framework, that allows developers to focus less on boilerplate, and focus more on what makes their app unique. We'll go over some of the best practices of using Ember for cross-device development, and then build an app from a single codebase that produces a standalone desktop app, an in-browser web app and an iOS/Android app.
Along the way we'll cover:
* A high level overview of the Ember.js ecosystem, including build tools and "add-ons"
* Recent improvements to Ember's view layer, and the ramifications on mobile performance
* Best practices for tooling & build pipelines, to maintain your cross-device compatibility
From Java to Kotlin: the adventures of a smooth migration
Most of the Java applications are written in Java 8 nowadays and people are looking around to upgrade to Java 11 or even migrating to Kotlin. Both are promoted as the new way to go and both have their own strengths. Upgrading to Java 11 might be an obvious next safe step to do and probably the most used frameworks will be Java 11 compliant soon. But what if you could migrate to Kotlin with the same effort? This would bring you additional advantages like: data class, very concise list manipulations, extension functions and even more to get you’re code more readable and maintainable.
Considering the Kotlin migration, the first questions that pop up are: What are the wise steps to take and where to start? Some experiences and thoughts answering these questions will be shared during this live coding session.
Essentials in JavaScript App Bundling with WebpackKhaled Al-Ansari
These slides were for the Webpack session (part of the fronteers meetup), you can find the examples in the following repo: https://github.com/KhaledElAnsari/Building-Apps-With-Wepback-Fronteers-Meetup
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?
There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.
Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
https://reactadvanced.com/workshops-3h
Ember.js is an opinionated web framework, that allows developers to focus less on boilerplate, and focus more on what makes their app unique. We'll go over some of the best practices of using Ember for cross-device development, and then build an app from a single codebase that produces a standalone desktop app, an in-browser web app and an iOS/Android app.
Along the way we'll cover:
* A high level overview of the Ember.js ecosystem, including build tools and "add-ons"
* Recent improvements to Ember's view layer, and the ramifications on mobile performance
* Best practices for tooling & build pipelines, to maintain your cross-device compatibility
From Java to Kotlin: the adventures of a smooth migration
Most of the Java applications are written in Java 8 nowadays and people are looking around to upgrade to Java 11 or even migrating to Kotlin. Both are promoted as the new way to go and both have their own strengths. Upgrading to Java 11 might be an obvious next safe step to do and probably the most used frameworks will be Java 11 compliant soon. But what if you could migrate to Kotlin with the same effort? This would bring you additional advantages like: data class, very concise list manipulations, extension functions and even more to get you’re code more readable and maintainable.
Considering the Kotlin migration, the first questions that pop up are: What are the wise steps to take and where to start? Some experiences and thoughts answering these questions will be shared during this live coding session.
Essentials in JavaScript App Bundling with WebpackKhaled Al-Ansari
These slides were for the Webpack session (part of the fronteers meetup), you can find the examples in the following repo: https://github.com/KhaledElAnsari/Building-Apps-With-Wepback-Fronteers-Meetup
Romans is teaching PHP to secondary school students with help of his own ATK framework. In his lightning talk he will show some of the apps students have made and will talk about 'instant gratification' of the high-level framework use.
ASP.NET Quick Wins - 20 Tips and Tricks To Shift Your Application into High GearKevin Griffin
Out of the box, ASP.NET can do a lot of amazing things. The tools and framework have grown to make mundane tasks, such as minification, simple to implement. Many times by using the framework as we were taught, opportunities to optimize pass us by. The reality is that underneath the covers, there is a whole world of easy tweaks we can implement to help ASP.NET perform at its peak.
In this presentation, we will walk through a slew of tweaks used to make ASP.NET perform in the best way possible. You will leave with a checklist of tasks that will instantly improve the performance of your web application!
I Heard React Was Good
with Ryan Christiani
There is no doubt React is here to stay, it’s popularity is on the rise. But if you are new to JS or new to JS frameworks you might be wondering WHY is it so popular. In this talk we will look at why we have React and what problems it solves. The concepts of reusable components, their life cycles and the common terminology. We will also explore what the workflow for building a modern React app looks like, and where React can fall short. Learning React in 2016 will be an important step in your career, so lets dive in!
OBJECTIVE
Break down the concepts behind React and make it easy for people to start building with it.
TARGET AUDIENCE
JavaScript developers or project mangers looking to get a better understanding of React.
ASSUMED AUDIENCE KNOWLEDGE
Intermediate understanding of JavaScript.
FIVE THINGS AUDIENCE MEMBERS WILL LEARN
Why do we have react, what problems does it solve
React components
Component life cycles
Common terminology
Where React falls short
In 2013, Facebook released a new JavaScript framework which would soon be adopted by loads of companies to build complex Front-End web applications. React is now mature, a great community quickly formed and produced by-products and extension like Redux or React Native. This workshop aims at showcasing the basics of React and discuss when choosing it the most relevant.
[DevDay 2017] ReactJS Hands on - Speaker: Binh Phan - Developer at mgm techno...DevDay.org
A short description on ReactJS for absolute beginners. The presentation will walk you through why we should use React to develop web applications, as well as a live coding session where you can see it in action.
Serverless architecture is a hot topic nowadays. The traditional architecture needs to have one or many servers to let the app run on, make the app come out the market. Many steps have been done from managing servers, monitoring servers to optimizing servers and it needs server administration knowledge. With Serverless, it doesn't mean you don't need the server at all, it means the server will be hosted by another party and away from you. You only focus on your code and give your product out to the market as fast as possible.
Romans is teaching PHP to secondary school students with help of his own ATK framework. In his lightning talk he will show some of the apps students have made and will talk about 'instant gratification' of the high-level framework use.
ASP.NET Quick Wins - 20 Tips and Tricks To Shift Your Application into High GearKevin Griffin
Out of the box, ASP.NET can do a lot of amazing things. The tools and framework have grown to make mundane tasks, such as minification, simple to implement. Many times by using the framework as we were taught, opportunities to optimize pass us by. The reality is that underneath the covers, there is a whole world of easy tweaks we can implement to help ASP.NET perform at its peak.
In this presentation, we will walk through a slew of tweaks used to make ASP.NET perform in the best way possible. You will leave with a checklist of tasks that will instantly improve the performance of your web application!
I Heard React Was Good
with Ryan Christiani
There is no doubt React is here to stay, it’s popularity is on the rise. But if you are new to JS or new to JS frameworks you might be wondering WHY is it so popular. In this talk we will look at why we have React and what problems it solves. The concepts of reusable components, their life cycles and the common terminology. We will also explore what the workflow for building a modern React app looks like, and where React can fall short. Learning React in 2016 will be an important step in your career, so lets dive in!
OBJECTIVE
Break down the concepts behind React and make it easy for people to start building with it.
TARGET AUDIENCE
JavaScript developers or project mangers looking to get a better understanding of React.
ASSUMED AUDIENCE KNOWLEDGE
Intermediate understanding of JavaScript.
FIVE THINGS AUDIENCE MEMBERS WILL LEARN
Why do we have react, what problems does it solve
React components
Component life cycles
Common terminology
Where React falls short
In 2013, Facebook released a new JavaScript framework which would soon be adopted by loads of companies to build complex Front-End web applications. React is now mature, a great community quickly formed and produced by-products and extension like Redux or React Native. This workshop aims at showcasing the basics of React and discuss when choosing it the most relevant.
[DevDay 2017] ReactJS Hands on - Speaker: Binh Phan - Developer at mgm techno...DevDay.org
A short description on ReactJS for absolute beginners. The presentation will walk you through why we should use React to develop web applications, as well as a live coding session where you can see it in action.
Serverless architecture is a hot topic nowadays. The traditional architecture needs to have one or many servers to let the app run on, make the app come out the market. Many steps have been done from managing servers, monitoring servers to optimizing servers and it needs server administration knowledge. With Serverless, it doesn't mean you don't need the server at all, it means the server will be hosted by another party and away from you. You only focus on your code and give your product out to the market as fast as possible.
The Modern Java Web Developer Bootcamp - Devoxx 2013Matt Raible
HTML5, CSS3, JavaScript, jQuery, Angular JS, Bootstrap, Mobile, CoffeeScript, GitHub, functional programming, Page Speed, Apache, JSON with Jackson, caching, REST, Security, load testing, profiling, Wro4j, Heroku, Cloudbees, AWS.
These are just some of the buzzwords that a Java web developer hears on a daily basis. This talk is designed to expose you to a plethora of technologies that you might've heard about, but haven't learned yet. We'll concentrate on the most important web developer skills, as well as UI tips and tricks to make you a better front-end engineer. Some of the most valuable engineers these days have front-end JS/CSS skills, as well as backend Java skills.
This presentation is from the University session I delivered at Devoxx 2013, in Antwerp. http://devoxx.be/dv13-matt-raible.html?presId=3648
ITB2019 ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 V...Ortus Solutions, Corp
For a long time, some frontend Javascript frameworks have helped you with one or two styles of Apps, but Quasar is an amazing new VueJS framework that allows you to build Single Page Apps (SPA), Server-side Rendered Apps (SSR), Progressive Web Apps (PWA), Mobile Apps (Android and IOS) through Cordova as well as Multi-platform Desktop Apps using Electron. With the Quasar CLI, you can quickly start a project, and have a single code base that can output multiple formats, as needed. Come to this session and find out how.
ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS cod...Gavin Pickin
For a long time, some frontend Javascript frameworks have helped you with one or two styles of Apps, but Quasar is an amazing new VueJS framework that allows you to build Single Page Apps (SPA), Server-side Rendered Apps (SSR), Progressive Web Apps (PWA), Mobile Apps (Android and IOS) through Cordova as well as Multi-platform Desktop Apps using Electron. With the Quasar CLI, you can quickly start a project, and have a single code base that can output multiple formats, as needed. Come to this session and find out how.
Presented at Into the Box 2019
A full weekend of hands-on instruction from a senior software engineer. Over 6 past classes instructed!
AngularJS is a modern Javascript MVC application framework which provides features such as dependency injection, unit-testable components, templates, view routing, easy access to REST-based resources, and much more. This weekend workshop focuses on teaching you the fundamentals and the advanced application of AngularJS. All weekend you will dig into AngularJS hands-on and work through labs and exercises designed to give you a full understanding of AngularJS.
Presentation for Angular Hack Day 2019 in Melbourne for Angular routing, presented by Jernej Kavka (JK).
GitHub URL: https://github.com/jernejk/AngularServices-Routing
Why you should add React to your Rails application now!David Roberts
React is a javascript library for building user interfaces which has many great features going for it. It also happens to be easy to introduce in small increments, particularly when compared to other javascript frameworks, and plays well with Rails. Find out how you can start modernizing the javascript in your Rails application today, without major refactoring.
**** Java Certification Training: https://www.edureka.co/java-j2ee-soa-training ****
This Edureka tutorial on “Advanced Java” will talk about 3 main concepts i.e. JAVA Database Connectivity, Servlets, and Java Server Pages. It will also talk about the various features, connections, statements, advantages, and need for advanced Java etc. Through this tutorial you will learn the following topics:
Introduction to J2EE
JDBC Architecture
JDBC Connections
JDBC Statements
Introduction to servlets
Servlet Life Cycle
Steps to create Servlet in Eclipse
Session Tracking and Cookies
Introduction to Java Server Pages
JSP Life Cycle
JSP Scripting Elements
Check out our Java Tutorial blog series: https://goo.gl/osrGrS
Check out our complete Youtube playlist here: https://goo.gl/gMFLx3
Follow us to never miss an update in the future.
Instagram: https://www.instagram.com/edureka_learning/
Facebook: https://www.facebook.com/edurekaIN/
Twitter: https://twitter.com/edurekain
LinkedIn: https://www.linkedin.com/company/edureka
Comparing Native Java REST API Frameworks - Seattle JUG 2022Matt Raible
Use Spring Boot! No, use Micronaut!! Nooooo, Quarkus is the best!!! What about Helidon?
There are a lot of developers praising the hottest, and fastest, Java REST frameworks: Micronaut, Quarkus, Spring Boot, and Helidon. In this session, you'll learn how to do the following with each framework:
✅ Build a REST API
✅ Secure your API with OAuth 2.0
✅ Optimize for production with Docker and GraalVM
I'll also share some performance numbers and pretty graphs to compare community metrics.
Related blog post: https://developer.okta.com/blog/2021/06/18/native-java-framework-comparison
Helidon companion post: https://developer.okta.com/blog/2022/01/06/native-java-helidon
GitHub repo: https://github.com/oktadev/native-java-examples
Similar to JQuery Conf Berlin - Ondrisek - From Java To AngularJS (without pain) (20)
Creating a chatbot is only 50% programming. The other half is designing a sparkling personality people love talking to. In this talk Barbara Ondrisek shares her insights on UX topics.
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024Neo4j
Neha Bajwa, Vice President of Product Marketing, Neo4j
Join us as we explore breakthrough innovations enabled by interconnected data and AI. Discover firsthand how organizations use relationships in data to uncover contextual insights and solve our most pressing challenges – from optimizing supply chains, detecting fraud, and improving customer experiences to accelerating drug discoveries.
Dr. Sean Tan, Head of Data Science, Changi Airport Group
Discover how Changi Airport Group (CAG) leverages graph technologies and generative AI to revolutionize their search capabilities. This session delves into the unique search needs of CAG’s diverse passengers and customers, showcasing how graph data structures enhance the accuracy and relevance of AI-generated search results, mitigating the risk of “hallucinations” and improving the overall customer journey.
Removing Uninteresting Bytes in Software FuzzingAftab Hussain
Imagine a world where software fuzzing, the process of mutating bytes in test seeds to uncover hidden and erroneous program behaviors, becomes faster and more effective. A lot depends on the initial seeds, which can significantly dictate the trajectory of a fuzzing campaign, particularly in terms of how long it takes to uncover interesting behaviour in your code. We introduce DIAR, a technique designed to speedup fuzzing campaigns by pinpointing and eliminating those uninteresting bytes in the seeds. Picture this: instead of wasting valuable resources on meaningless mutations in large, bloated seeds, DIAR removes the unnecessary bytes, streamlining the entire process.
In this work, we equipped AFL, a popular fuzzer, with DIAR and examined two critical Linux libraries -- Libxml's xmllint, a tool for parsing xml documents, and Binutil's readelf, an essential debugging and security analysis command-line tool used to display detailed information about ELF (Executable and Linkable Format). Our preliminary results show that AFL+DIAR does not only discover new paths more quickly but also achieves higher coverage overall. This work thus showcases how starting with lean and optimized seeds can lead to faster, more comprehensive fuzzing campaigns -- and DIAR helps you find such seeds.
- These are slides of the talk given at IEEE International Conference on Software Testing Verification and Validation Workshop, ICSTW 2022.
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfMalak Abu Hammad
Discover how MongoDB Atlas and vector search technology can revolutionize your application's search capabilities. This comprehensive presentation covers:
* What is Vector Search?
* Importance and benefits of vector search
* Practical use cases across various industries
* Step-by-step implementation guide
* Live demos with code snippets
* Enhancing LLM capabilities with vector search
* Best practices and optimization strategies
Perfect for developers, AI enthusiasts, and tech leaders. Learn how to leverage MongoDB Atlas to deliver highly relevant, context-aware search results, transforming your data retrieval process. Stay ahead in tech innovation and maximize the potential of your applications.
#MongoDB #VectorSearch #AI #SemanticSearch #TechInnovation #DataScience #LLM #MachineLearning #SearchTechnology
Climate Impact of Software Testing at Nordic Testing DaysKari Kakkonen
My slides at Nordic Testing Days 6.6.2024
Climate impact / sustainability of software testing discussed on the talk. ICT and testing must carry their part of global responsibility to help with the climat warming. We can minimize the carbon footprint but we can also have a carbon handprint, a positive impact on the climate. Quality characteristics can be added with sustainability, and then measured continuously. Test environments can be used less, and in smaller scale and on demand. Test techniques can be used in optimizing or minimizing number of tests. Test automation can be used to speed up testing.
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfPaige Cruz
Monitoring and observability aren’t traditionally found in software curriculums and many of us cobble this knowledge together from whatever vendor or ecosystem we were first introduced to and whatever is a part of your current company’s observability stack.
While the dev and ops silo continues to crumble….many organizations still relegate monitoring & observability as the purview of ops, infra and SRE teams. This is a mistake - achieving a highly observable system requires collaboration up and down the stack.
I, a former op, would like to extend an invitation to all application developers to join the observability party will share these foundational concepts to build on:
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex ProofsAlex Pruden
This paper presents Reef, a system for generating publicly verifiable succinct non-interactive zero-knowledge proofs that a committed document matches or does not match a regular expression. We describe applications such as proving the strength of passwords, the provenance of email despite redactions, the validity of oblivious DNS queries, and the existence of mutations in DNA. Reef supports the Perl Compatible Regular Expression syntax, including wildcards, alternation, ranges, capture groups, Kleene star, negations, and lookarounds. Reef introduces a new type of automata, Skipping Alternating Finite Automata (SAFA), that skips irrelevant parts of a document when producing proofs without undermining soundness, and instantiates SAFA with a lookup argument. Our experimental evaluation confirms that Reef can generate proofs for documents with 32M characters; the proofs are small and cheap to verify (under a second).
Paper: https://eprint.iacr.org/2023/1886
Building RAG with self-deployed Milvus vector database and Snowpark Container...Zilliz
This talk will give hands-on advice on building RAG applications with an open-source Milvus database deployed as a docker container. We will also introduce the integration of Milvus with Snowpark Container Services.
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...SOFTTECHHUB
The choice of an operating system plays a pivotal role in shaping our computing experience. For decades, Microsoft's Windows has dominated the market, offering a familiar and widely adopted platform for personal and professional use. However, as technological advancements continue to push the boundaries of innovation, alternative operating systems have emerged, challenging the status quo and offering users a fresh perspective on computing.
One such alternative that has garnered significant attention and acclaim is Nitrux Linux 3.5.0, a sleek, powerful, and user-friendly Linux distribution that promises to redefine the way we interact with our devices. With its focus on performance, security, and customization, Nitrux Linux presents a compelling case for those seeking to break free from the constraints of proprietary software and embrace the freedom and flexibility of open-source computing.
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.
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Albert Hoitingh
In this session I delve into the encryption technology used in Microsoft 365 and Microsoft Purview. Including the concepts of Customer Key and Double Key Encryption.
41. 9.12.2015 jquery conf berlin @electrobabe
Links
● Slides and Src on Github
https://github.com/electrobabe/hungry-ui
● http://electrobabe.at
● https://play.google.com/store/apps/details?
id=at.chefbabe.hungry
● https://play.google.com/store/apps/details?
id=com.likeahipster.app
42. 9.12.2015 jquery conf berlin @electrobabe
Credentials
Images from
● hipsterlogogenerator.com
● stocksnap.io
● Wikipedia
● Giphy
Editor's Notes
Hello!
My name is Barbara Ondrisek and I'm working as a freelancer for almost 15 years for different companies mostly on Java web projects, but I also like mobile development – especially Android.
Currently I'm working for the Erste Bank on the new Version of their netbanking system George.
I have a strong Java background – I love Java - but I always wanted to keep in touch with the Frontend. So last year my team leader asked me wheater I want to join a Full Stack team.
BUT!
They use JavaScript
BUT Java developers fear Java Script.
Why?
ps. first I wanted to make a presentation solely with cat pictures but I decided against it
For me object oriented Java is so comforting because it uses a lot of structure – law and order, especially for the "Special Victims Unit" the Java Server Faces guys.
There is a huge barrier when you start programming Java, especially when you come from "script land". But there are many very handy frameworks and standard tools such as Maven, JPA, or Spring that might help you with developing reliable large scale web apps.
And for us Java people JS looks like...
Sodom and Gomorrha, because there are sooo many frameworks and tools and noone standardizes anything. Of cause there are certain streams to use structural frameworks such as Backbone, React, ... and now Ecma Script 6 is coming...
But for me as a Java developer JS was always a place where every thing is allowed and possible and you can do whatever comes to your mind...
I mean seriously
...eval is the same as ...
...evil!
What ever prgramm any antipattern that comes into your mind such as spaghetti code (this is actually a picture of my lunch last week), extension of objects, pollution of the global Namespace, improper Use of Truthy and Falsey Evaluation etc.
JS has no standardisation, millions of different, frameworks and github projects...
All those strange "undefined is not a function"s and "object Object"s (when you print out a variable and HTML code mixed with javascript...
No IDE, no debugging...
Some might see through the matrix, but not many can handle JS code in a proper way that it is maintainable or scalable.
BUT web app implementations in Java aren't much better:
ps. now I'm coming to the a little more serious part of my presentation.
Your code base usually grows very fast and you need structure.
Model-View-Controller is a pattern meaning the separation of concerns. You seperate the presentation (the view) from the program's logic (the controller) and the data layer (the model).
There are several ways to achieve MVC in Java. A good approach is Spring MVC with Spring Web Flow - but there are also bad and very bad approaches such as JSP or JSF with Beans or Servlets. Old technology I contributed some bad still on my own.
So the solution is:
AngularJS FTW!
The self-called "Superheroic JavaScript MVW Framework" AngularJS is a state of the art JavaScript tool for single page web applications that offers a lot that JS alone does not - namely structure. And it's from Google so it can't be "bad".
In jQuery apps the DOM often represents the model, but with Angular the business logic is decoupled from DOM manipulation.
And just a litte disclaimer: I'm talking about Angular 1, not 2, because AFAIK it's still BETA.
Angular calls their principle "Model-View-Whatever":
You have a single page app devided into modules such as the login, a main screen, config).
Simply speaking: An Angular app is a collection of modules.
A module consists of different components:
* Model (Services / Factories <-> REST API)
* <-> Controller (Controllers)
* <-> View (Templates with build in Directives)
Here you find a simple html file. I include the angular dependency as js script in the header and define that this references an angular app with "ng-app".
With a very simple reference to "ng-model" I define an object (through data binding) in the current scope respectively DOM that will be initialized on runtime.
Next I just display it by referencing it inside this curly braces, which means that it will be "printed out" in the HTML.
When you now open the html file in a browser the browser loads this mini app and when you now enter something in the input field the value is displayed here in this span immediately.
Easy, isn't it?
Now you add some swag: A Controller.
This is an example app I wrote for my talk here, but it is also used with a side project of me: The Hungry? App, an app that uses your location to show you venues such as restaurants close by. In this app you can also save your favorite venue in a list. And this is done on a server. For this server, a REST API, I made this Angular frontend.
With "ng-controller" you define a function that encapsulates our logic that is defined in a separate js file.
You also have integrated form validations. Here the input type is text with a max lenght of 30. You can also define something like floats or regexs.
A typical controller is placed in a seperate module – in this case we only have one, that is the app, but in the next example there will be more...
Now you define the controller as a function that contains the app's logic such as scope objects and different functions to handle data.
This a a super simple example so let me show you a little bit more.
Here you see...
In this example you see the different modules:
I defined a module "hungry.controllers", a module "hungry.constants" and "hungry.factories".
The factories module is the model module, in Angular it is called "Factory". With my factory I can fetch data from my REST API. This is accomplished with the resource library that I referenced in the html and injected here into my factory.
I defined a constants module for some fixed values such as the API path and I defined different controllers.
The angular resource library is a jquery tool to fetch data.
Dependency injection is the most amazing feature of AngularJS.
It allows you to declaratively describe how your application is wired. This means that your application needs no main() method which is usually an unmaintainable mess.
You work modular and can also simply remove or replace components.
Directives is a unique and powerful feature available only in Angular. Directives let you invent new HTML syntax, specific to your application.
At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform the DOM element and its children.
Directives are pretty handy, but hard to test because of the HTML code.
This is a simple example. One can also use reusable HTML templates and add lots of complexity. Nice is that the scope is directly seperated.
Localization
An important part of serious apps is localization. Angular's locale aware filters and stemming directives give you building blocks to make your application available in all locales.
Angular supports i18n/l10n for date, number and currency filters.
Deep Linking
A deep link reflects where the user is in the app, this is useful so users can bookmark and email links to locations within apps. Round trip apps get this automatically, but AJAX apps by their nature do not. AngularJS combines the benefits of deep link with desktop app-like behavior.
Angular is a single page app, but with these routes you can set ...
For views we use jade templates in our project. And you can nest them inside of each other.
Such as headers, menues, and other reusable components
For views we use jade templates in our project. And you can nest them inside of each other.
For views we use jade templates in our project. And you can nest them inside of each other.
Structure by type: controllers, directives, services templates
Structure by features
Testable
AngularJS was designed from ground up to be testable. It encourages behavior-view separation, comes pre-bundled with mocks, and takes full advantage of dependency injection. It also comes with end-to-end scenario runner which eliminates test flakiness by understanding the inner workings of AngularJS.
As tools there are karma and phantom JS. Angular has a built-in mock framework "angular.mock.module".
Build with gulp!
Gulp: Task runner built on Node.js. Build process (less, coffee script / jasmine, jade)
Gulp + extensions, such as
- babel for ES6 support
- lodash
Dependencies are managed by bower resp. Webpack.
overview of supporting state of the art frameworks:
npm FTW!
Bower: Package manager (lodash )
Gulp: Task runner built on Node.js. Build process (less, coffee script / jasmine, jade)
Bootstrap UI
overview of supporting state of the art frameworks:
npm FTW!
lodash
Bootstrap UI
Etc.etc.
No pain, no gain?
Best practices are:
Define controllers, factories etc. in seperate files
Cache dependencies
Don't use $rootScope. At all. Never
live reload as tool
Debug in IntelliJ
Lessons Learned
Integration in mvn, gulp in build (win vs. Osx)
Test coverage (no integration in sonar?)
No Downsides at all!
...just kidding
Downsides
Structure is provided but not enforced
The code is only as good as its programmers
Why I love Angular
MVC (MVW)
Modular design
Declarative approach
Active development - community