SlideShare a Scribd company logo
@bojanv91

Angular JS + NancyFx + MongoDB =
Ultimate Trio For Building SPA apps
Bojan Veljanovski,
Software Engineer &
Lead Technology Researcher,

HASELT
AngularJS + NancyFx + MongoDB = The best trio for ultimate SPA by Bojan Veljanovski
@bojanv91

Bojan Veljanovski
Software Engineer and
Lead Technology Researcher, HASELT
Microsoft Certified Professional
Technical Speaker
 Ex - Microsoft Student Partner
 Co-Founding member, Leader & Speaker of FINKI Tech
Club
“It's not longer good enough to build
web apps around full page loads and
then progressively enhance them to
behave more dynamically .”
- Throne of JS Conference, 2012
Traditional Web App
Server

Browser

Page HTML

Web Page
Navigate

Page HTML

Web Page
Next-Gen Web
The web is moving to the client
What’s in the session?
What is Single Page Application
– and why it matters

Basic concepts for successful SPA
– and tools for building it

How to build complete end-to-end SPA
in few steps
– e.g. Let’s c0de!
What is SPA?
Rich and responsive web application
All HTML/CSS/JS are loaded onto one page
New content is pulled via AJAX
UI interactions are handled in the browser
Examples:
– GitHub, Gmail, Azure Management Portal
Characteristics of good SPAs
Based on HTML, CSS and JavaScript
Does NOT break the browser
Fast and responsive
– Should feel like native application

Reduces server overhead
How SPA works
Web UI
HTML/CSS/JS

REST Services
JSON / XML

Server

Client
Common SPA features
MVC - based
Data-binding (2-way)
Declarative programming
Routing
Encourages modularization
Frameworks & Libraries
AngularJS + NancyFx + MongoDB = The best trio for ultimate SPA by Bojan Veljanovski
Angular.js
Very light framework
Large community
Great documentation
Encourages good design patterns
Ideal for CRUD apps
Angular.js 101
Angular.js 102
Angular.js – Full Stack
AngularJS + NancyFx + MongoDB = The best trio for ultimate SPA by Bojan Veljanovski
Nancy (Back-end)
Lightweight framework for building HTTP
services
Open Source C#/.NET/Mono
Inspired by Sinatra from Ruby world
You can write Hello World Nancy app into a
single tweet (DEMO!)
MongoDB (Storage)
NoSQL
Open-source
Document-oriented storage
– JSON-style documents

Scalable
LINQ support with C# driver
Source Code of the Demo on GitHub: http://bit.ly/JqrJWm

LET’S C0DE
Outcomes from the SPA approach
Front-end becomes almost Native
Back-end becomes just Clean and Thin API
Storage becomes natural for the Web (JSON)
Use cases when to go to SPA…
Highly interactive web apps
Data intensive web apps
Mobile web apps
– With offline support (cache manifest, local
storage)

Apps meant to be used for long continuous
period
…but careful, SPA roads are bumpy
Code duplication on client and server can
occur
Secure your APIs
SPA stacks depend on many 3-rd party
libraries, beware of compatibility issues
Step learning curve
Strong JavaScript skills are required
Questions?
 Complete electronic evaluation
forms on the computers in the
hall and enter to win!
– Telerik Ultimate Collection
– CodeSmith Tools Generator Pro
Personal
– JetBrains ReSharper
– Seavus EDC training vouchers
– Pluralsight subscriptions
– and many more…
AngularJS + NancyFx + MongoDB = The best trio for ultimate SPA by Bojan Veljanovski
Ad

More Related Content

What's hot (20)

Building a Node.JS accelerator for your headless Drupal backend - DrupalCamp ...
Building a Node.JS accelerator for your headless Drupal backend - DrupalCamp ...Building a Node.JS accelerator for your headless Drupal backend - DrupalCamp ...
Building a Node.JS accelerator for your headless Drupal backend - DrupalCamp ...
Exove
 
PHP Indonesia - Nodejs Web Development
PHP Indonesia - Nodejs Web DevelopmentPHP Indonesia - Nodejs Web Development
PHP Indonesia - Nodejs Web Development
Irfan Maulana
 
Introduction to mean stack
Introduction to mean stackIntroduction to mean stack
Introduction to mean stack
Praveen Gubbala
 
Angular js introduction
Angular js introductionAngular js introduction
Angular js introduction
Praveen Gubbala
 
Developing realtime apps with Drupal and NodeJS
Developing realtime apps with Drupal and NodeJS Developing realtime apps with Drupal and NodeJS
Developing realtime apps with Drupal and NodeJS
drupalcampest
 
Kick start your journey as mern stack developer
Kick start your journey as mern stack developerKick start your journey as mern stack developer
Kick start your journey as mern stack developer
ShrutiPanjwani1
 
MEAN Stack - Google Developers Live 10/03/2013
MEAN Stack - Google Developers Live 10/03/2013MEAN Stack - Google Developers Live 10/03/2013
MEAN Stack - Google Developers Live 10/03/2013
Valeri Karpov
 
Choosing the best JavaScript framework/library/toolkit
Choosing the best JavaScript framework/library/toolkitChoosing the best JavaScript framework/library/toolkit
Choosing the best JavaScript framework/library/toolkit
Hristo Chakarov
 
LAMP is so yesterday, MEAN is so tomorrow! :)
LAMP is so yesterday, MEAN is so tomorrow! :) LAMP is so yesterday, MEAN is so tomorrow! :)
LAMP is so yesterday, MEAN is so tomorrow! :)
Sascha Sambale
 
MEAN Stack Warm-up
MEAN Stack Warm-upMEAN Stack Warm-up
MEAN Stack Warm-up
Troy Miles
 
Javascript Frameworks Comparison
Javascript Frameworks ComparisonJavascript Frameworks Comparison
Javascript Frameworks Comparison
Deepu S Nath
 
Mean Stack - An Overview
Mean Stack - An OverviewMean Stack - An Overview
Mean Stack - An Overview
Naveen Pete
 
Unobtrusive js
Unobtrusive jsUnobtrusive js
Unobtrusive js
bretticus
 
On Selecting JavaScript Frameworks (Women Who Code 10/15)
On Selecting JavaScript Frameworks (Women Who Code 10/15)On Selecting JavaScript Frameworks (Women Who Code 10/15)
On Selecting JavaScript Frameworks (Women Who Code 10/15)
Zoe Landon
 
Angular 2 vs React
Angular 2 vs ReactAngular 2 vs React
Angular 2 vs React
Iran Reyes Fleitas
 
Introduction to the MEAN stack
Introduction to the MEAN stackIntroduction to the MEAN stack
Introduction to the MEAN stack
Yoann Gotthilf
 
Evolution of java script libraries
Evolution of java script librariesEvolution of java script libraries
Evolution of java script libraries
Columbia Developers Guild
 
Mean PPT
Mean PPTMean PPT
Mean PPT
Harendra Singh Bisht
 
Mean stack
Mean stackMean stack
Mean stack
Eng Chrispinus Onyancha
 
Getting Started with React Native (and should I use it at all?)
Getting Started with React Native (and should I use it at all?)Getting Started with React Native (and should I use it at all?)
Getting Started with React Native (and should I use it at all?)
Devin Abbott
 
Building a Node.JS accelerator for your headless Drupal backend - DrupalCamp ...
Building a Node.JS accelerator for your headless Drupal backend - DrupalCamp ...Building a Node.JS accelerator for your headless Drupal backend - DrupalCamp ...
Building a Node.JS accelerator for your headless Drupal backend - DrupalCamp ...
Exove
 
PHP Indonesia - Nodejs Web Development
PHP Indonesia - Nodejs Web DevelopmentPHP Indonesia - Nodejs Web Development
PHP Indonesia - Nodejs Web Development
Irfan Maulana
 
Introduction to mean stack
Introduction to mean stackIntroduction to mean stack
Introduction to mean stack
Praveen Gubbala
 
Developing realtime apps with Drupal and NodeJS
Developing realtime apps with Drupal and NodeJS Developing realtime apps with Drupal and NodeJS
Developing realtime apps with Drupal and NodeJS
drupalcampest
 
Kick start your journey as mern stack developer
Kick start your journey as mern stack developerKick start your journey as mern stack developer
Kick start your journey as mern stack developer
ShrutiPanjwani1
 
MEAN Stack - Google Developers Live 10/03/2013
MEAN Stack - Google Developers Live 10/03/2013MEAN Stack - Google Developers Live 10/03/2013
MEAN Stack - Google Developers Live 10/03/2013
Valeri Karpov
 
Choosing the best JavaScript framework/library/toolkit
Choosing the best JavaScript framework/library/toolkitChoosing the best JavaScript framework/library/toolkit
Choosing the best JavaScript framework/library/toolkit
Hristo Chakarov
 
LAMP is so yesterday, MEAN is so tomorrow! :)
LAMP is so yesterday, MEAN is so tomorrow! :) LAMP is so yesterday, MEAN is so tomorrow! :)
LAMP is so yesterday, MEAN is so tomorrow! :)
Sascha Sambale
 
MEAN Stack Warm-up
MEAN Stack Warm-upMEAN Stack Warm-up
MEAN Stack Warm-up
Troy Miles
 
Javascript Frameworks Comparison
Javascript Frameworks ComparisonJavascript Frameworks Comparison
Javascript Frameworks Comparison
Deepu S Nath
 
Mean Stack - An Overview
Mean Stack - An OverviewMean Stack - An Overview
Mean Stack - An Overview
Naveen Pete
 
Unobtrusive js
Unobtrusive jsUnobtrusive js
Unobtrusive js
bretticus
 
On Selecting JavaScript Frameworks (Women Who Code 10/15)
On Selecting JavaScript Frameworks (Women Who Code 10/15)On Selecting JavaScript Frameworks (Women Who Code 10/15)
On Selecting JavaScript Frameworks (Women Who Code 10/15)
Zoe Landon
 
Introduction to the MEAN stack
Introduction to the MEAN stackIntroduction to the MEAN stack
Introduction to the MEAN stack
Yoann Gotthilf
 
Getting Started with React Native (and should I use it at all?)
Getting Started with React Native (and should I use it at all?)Getting Started with React Native (and should I use it at all?)
Getting Started with React Native (and should I use it at all?)
Devin Abbott
 

Similar to AngularJS + NancyFx + MongoDB = The best trio for ultimate SPA by Bojan Veljanovski (20)

Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | Introduction
JohnTaieb
 
Java script framework
Java script frameworkJava script framework
Java script framework
Debajani Mohanty
 
AI introduction to modern web technologies.pptx
AI  introduction to modern web technologies.pptxAI  introduction to modern web technologies.pptx
AI introduction to modern web technologies.pptx
AmrutaGourgonda
 
What is mean stack?
What is mean stack?What is mean stack?
What is mean stack?
Rishabh Saxena
 
Modern JavaScript Frameworks: Angular, React & Vue.js
Modern JavaScript Frameworks: Angular, React & Vue.jsModern JavaScript Frameworks: Angular, React & Vue.js
Modern JavaScript Frameworks: Angular, React & Vue.js
Jonas Bandi
 
Introduction to backbone_js
Introduction to backbone_jsIntroduction to backbone_js
Introduction to backbone_js
Mohammed Saqib
 
Important Backend Frameworks To Remember For Businesses In 2023
Important Backend Frameworks To Remember For Businesses In 2023Important Backend Frameworks To Remember For Businesses In 2023
Important Backend Frameworks To Remember For Businesses In 2023
Netizens Technologies
 
Food borne human diseases
Food borne human diseasesFood borne human diseases
Food borne human diseases
AmalMohammedNasserSa
 
Netbeans65 Osum Slides
Netbeans65 Osum SlidesNetbeans65 Osum Slides
Netbeans65 Osum Slides
Abhishek Gupta
 
AFTAB AHMED.pptx
AFTAB AHMED.pptxAFTAB AHMED.pptx
AFTAB AHMED.pptx
AftabAhmed132116
 
Building Applications With the MEAN Stack
Building Applications With the MEAN StackBuilding Applications With the MEAN Stack
Building Applications With the MEAN Stack
Nir Noy
 
webdevelopmentppt-210923044639 (1).pptx
webdevelopmentppt-210923044639 (1).pptxwebdevelopmentppt-210923044639 (1).pptx
webdevelopmentppt-210923044639 (1).pptx
learnEnglish51
 
TECHNOLOGY FOR BACK-END WEB DEVELOPMENT: SERVER-SIDE SCRIPTING
TECHNOLOGY FOR BACK-END WEB DEVELOPMENT: SERVER-SIDE SCRIPTING TECHNOLOGY FOR BACK-END WEB DEVELOPMENT: SERVER-SIDE SCRIPTING
TECHNOLOGY FOR BACK-END WEB DEVELOPMENT: SERVER-SIDE SCRIPTING
PamRobert
 
Angular jS Introduction by Google
Angular jS Introduction by GoogleAngular jS Introduction by Google
Angular jS Introduction by Google
ASG
 
Introduction to Web Frameworks
Introduction to Web FrameworksIntroduction to Web Frameworks
Introduction to Web Frameworks
Dr Sarika Jadhav
 
The Best Web Development Services And Company in Usa
The  Best Web Development  Services And Company in UsaThe  Best Web Development  Services And Company in Usa
The Best Web Development Services And Company in Usa
TechnoProfiles Pvt. Ltd.
 
PHP is the King, nodejs is the Prince and Lua is the fool
PHP is the King, nodejs is the Prince and Lua is the foolPHP is the King, nodejs is the Prince and Lua is the fool
PHP is the King, nodejs is the Prince and Lua is the fool
Alessandro Cinelli (cirpo)
 
Top 10 Node.JS Frameworks To Gear Up Your Web App Development in 2021
Top 10 Node.JS Frameworks To Gear Up Your Web App Development in 2021Top 10 Node.JS Frameworks To Gear Up Your Web App Development in 2021
Top 10 Node.JS Frameworks To Gear Up Your Web App Development in 2021
Katy Slemon
 
Top 10 Javascript Frameworks For Easy Web Development
Top 10 Javascript Frameworks For Easy Web DevelopmentTop 10 Javascript Frameworks For Easy Web Development
Top 10 Javascript Frameworks For Easy Web Development
Technostacks Infotech Pvt. Ltd.
 
Web development ppt
Web development pptWeb development ppt
Web development ppt
ParasJain222
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | Introduction
JohnTaieb
 
AI introduction to modern web technologies.pptx
AI  introduction to modern web technologies.pptxAI  introduction to modern web technologies.pptx
AI introduction to modern web technologies.pptx
AmrutaGourgonda
 
Modern JavaScript Frameworks: Angular, React & Vue.js
Modern JavaScript Frameworks: Angular, React & Vue.jsModern JavaScript Frameworks: Angular, React & Vue.js
Modern JavaScript Frameworks: Angular, React & Vue.js
Jonas Bandi
 
Introduction to backbone_js
Introduction to backbone_jsIntroduction to backbone_js
Introduction to backbone_js
Mohammed Saqib
 
Important Backend Frameworks To Remember For Businesses In 2023
Important Backend Frameworks To Remember For Businesses In 2023Important Backend Frameworks To Remember For Businesses In 2023
Important Backend Frameworks To Remember For Businesses In 2023
Netizens Technologies
 
Netbeans65 Osum Slides
Netbeans65 Osum SlidesNetbeans65 Osum Slides
Netbeans65 Osum Slides
Abhishek Gupta
 
Building Applications With the MEAN Stack
Building Applications With the MEAN StackBuilding Applications With the MEAN Stack
Building Applications With the MEAN Stack
Nir Noy
 
webdevelopmentppt-210923044639 (1).pptx
webdevelopmentppt-210923044639 (1).pptxwebdevelopmentppt-210923044639 (1).pptx
webdevelopmentppt-210923044639 (1).pptx
learnEnglish51
 
TECHNOLOGY FOR BACK-END WEB DEVELOPMENT: SERVER-SIDE SCRIPTING
TECHNOLOGY FOR BACK-END WEB DEVELOPMENT: SERVER-SIDE SCRIPTING TECHNOLOGY FOR BACK-END WEB DEVELOPMENT: SERVER-SIDE SCRIPTING
TECHNOLOGY FOR BACK-END WEB DEVELOPMENT: SERVER-SIDE SCRIPTING
PamRobert
 
Angular jS Introduction by Google
Angular jS Introduction by GoogleAngular jS Introduction by Google
Angular jS Introduction by Google
ASG
 
Introduction to Web Frameworks
Introduction to Web FrameworksIntroduction to Web Frameworks
Introduction to Web Frameworks
Dr Sarika Jadhav
 
The Best Web Development Services And Company in Usa
The  Best Web Development  Services And Company in UsaThe  Best Web Development  Services And Company in Usa
The Best Web Development Services And Company in Usa
TechnoProfiles Pvt. Ltd.
 
PHP is the King, nodejs is the Prince and Lua is the fool
PHP is the King, nodejs is the Prince and Lua is the foolPHP is the King, nodejs is the Prince and Lua is the fool
PHP is the King, nodejs is the Prince and Lua is the fool
Alessandro Cinelli (cirpo)
 
Top 10 Node.JS Frameworks To Gear Up Your Web App Development in 2021
Top 10 Node.JS Frameworks To Gear Up Your Web App Development in 2021Top 10 Node.JS Frameworks To Gear Up Your Web App Development in 2021
Top 10 Node.JS Frameworks To Gear Up Your Web App Development in 2021
Katy Slemon
 
Web development ppt
Web development pptWeb development ppt
Web development ppt
ParasJain222
 
Ad

More from Bojan Veljanovski (7)

CodeCamp 2018 - Architecting Systems with CQRS - Four Years Experience Report...
CodeCamp 2018 - Architecting Systems with CQRS - Four Years Experience Report...CodeCamp 2018 - Architecting Systems with CQRS - Four Years Experience Report...
CodeCamp 2018 - Architecting Systems with CQRS - Four Years Experience Report...
Bojan Veljanovski
 
NoSQL document oriented data access for .net systems with postgresql and marten
NoSQL document oriented data access for .net systems with postgresql and martenNoSQL document oriented data access for .net systems with postgresql and marten
NoSQL document oriented data access for .net systems with postgresql and marten
Bojan Veljanovski
 
DIGIT Noe 2016 - Overview of front end development today
DIGIT Noe 2016 - Overview of front end development todayDIGIT Noe 2016 - Overview of front end development today
DIGIT Noe 2016 - Overview of front end development today
Bojan Veljanovski
 
Bojan Veljanovski - Modular Software Architecture and Design (Code Camp 2016)
Bojan Veljanovski - Modular Software Architecture and Design (Code Camp 2016)Bojan Veljanovski - Modular Software Architecture and Design (Code Camp 2016)
Bojan Veljanovski - Modular Software Architecture and Design (Code Camp 2016)
Bojan Veljanovski
 
Vertical Slices in .NET - Bojan Veljanovski, March 2016, MK.NET UG
Vertical Slices in .NET - Bojan Veljanovski, March 2016, MK.NET UGVertical Slices in .NET - Bojan Veljanovski, March 2016, MK.NET UG
Vertical Slices in .NET - Bojan Veljanovski, March 2016, MK.NET UG
Bojan Veljanovski
 
Quick look at Web Components and Project Polymer - MKNET UG
Quick look at Web Components and Project Polymer - MKNET UGQuick look at Web Components and Project Polymer - MKNET UG
Quick look at Web Components and Project Polymer - MKNET UG
Bojan Veljanovski
 
Real-world software design practices when developing ASP.NET web systems by B...
Real-world software design practices when developing ASP.NET web systems by B...Real-world software design practices when developing ASP.NET web systems by B...
Real-world software design practices when developing ASP.NET web systems by B...
Bojan Veljanovski
 
CodeCamp 2018 - Architecting Systems with CQRS - Four Years Experience Report...
CodeCamp 2018 - Architecting Systems with CQRS - Four Years Experience Report...CodeCamp 2018 - Architecting Systems with CQRS - Four Years Experience Report...
CodeCamp 2018 - Architecting Systems with CQRS - Four Years Experience Report...
Bojan Veljanovski
 
NoSQL document oriented data access for .net systems with postgresql and marten
NoSQL document oriented data access for .net systems with postgresql and martenNoSQL document oriented data access for .net systems with postgresql and marten
NoSQL document oriented data access for .net systems with postgresql and marten
Bojan Veljanovski
 
DIGIT Noe 2016 - Overview of front end development today
DIGIT Noe 2016 - Overview of front end development todayDIGIT Noe 2016 - Overview of front end development today
DIGIT Noe 2016 - Overview of front end development today
Bojan Veljanovski
 
Bojan Veljanovski - Modular Software Architecture and Design (Code Camp 2016)
Bojan Veljanovski - Modular Software Architecture and Design (Code Camp 2016)Bojan Veljanovski - Modular Software Architecture and Design (Code Camp 2016)
Bojan Veljanovski - Modular Software Architecture and Design (Code Camp 2016)
Bojan Veljanovski
 
Vertical Slices in .NET - Bojan Veljanovski, March 2016, MK.NET UG
Vertical Slices in .NET - Bojan Veljanovski, March 2016, MK.NET UGVertical Slices in .NET - Bojan Veljanovski, March 2016, MK.NET UG
Vertical Slices in .NET - Bojan Veljanovski, March 2016, MK.NET UG
Bojan Veljanovski
 
Quick look at Web Components and Project Polymer - MKNET UG
Quick look at Web Components and Project Polymer - MKNET UGQuick look at Web Components and Project Polymer - MKNET UG
Quick look at Web Components and Project Polymer - MKNET UG
Bojan Veljanovski
 
Real-world software design practices when developing ASP.NET web systems by B...
Real-world software design practices when developing ASP.NET web systems by B...Real-world software design practices when developing ASP.NET web systems by B...
Real-world software design practices when developing ASP.NET web systems by B...
Bojan Veljanovski
 
Ad

Recently uploaded (20)

Role of Data Annotation Services in AI-Powered Manufacturing
Role of Data Annotation Services in AI-Powered ManufacturingRole of Data Annotation Services in AI-Powered Manufacturing
Role of Data Annotation Services in AI-Powered Manufacturing
Andrew Leo
 
Andrew Marnell: Transforming Business Strategy Through Data-Driven Insights
Andrew Marnell: Transforming Business Strategy Through Data-Driven InsightsAndrew Marnell: Transforming Business Strategy Through Data-Driven Insights
Andrew Marnell: Transforming Business Strategy Through Data-Driven Insights
Andrew Marnell
 
DevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptx
DevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptxDevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptx
DevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptx
Justin Reock
 
Greenhouse_Monitoring_Presentation.pptx.
Greenhouse_Monitoring_Presentation.pptx.Greenhouse_Monitoring_Presentation.pptx.
Greenhouse_Monitoring_Presentation.pptx.
hpbmnnxrvb
 
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
BookNet Canada
 
Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep Dive
Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep DiveDesigning Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep Dive
Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep Dive
ScyllaDB
 
Drupalcamp Finland – Measuring Front-end Energy Consumption
Drupalcamp Finland – Measuring Front-end Energy ConsumptionDrupalcamp Finland – Measuring Front-end Energy Consumption
Drupalcamp Finland – Measuring Front-end Energy Consumption
Exove
 
How Can I use the AI Hype in my Business Context?
How Can I use the AI Hype in my Business Context?How Can I use the AI Hype in my Business Context?
How Can I use the AI Hype in my Business Context?
Daniel Lehner
 
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdfSAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
Precisely
 
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptxIncreasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Anoop Ashok
 
Quantum Computing Quick Research Guide by Arthur Morgan
Quantum Computing Quick Research Guide by Arthur MorganQuantum Computing Quick Research Guide by Arthur Morgan
Quantum Computing Quick Research Guide by Arthur Morgan
Arthur Morgan
 
Linux Support for SMARC: How Toradex Empowers Embedded Developers
Linux Support for SMARC: How Toradex Empowers Embedded DevelopersLinux Support for SMARC: How Toradex Empowers Embedded Developers
Linux Support for SMARC: How Toradex Empowers Embedded Developers
Toradex
 
Mobile App Development Company in Saudi Arabia
Mobile App Development Company in Saudi ArabiaMobile App Development Company in Saudi Arabia
Mobile App Development Company in Saudi Arabia
Steve Jonas
 
Build Your Own Copilot & Agents For Devs
Build Your Own Copilot & Agents For DevsBuild Your Own Copilot & Agents For Devs
Build Your Own Copilot & Agents For Devs
Brian McKeiver
 
Splunk Security Update | Public Sector Summit Germany 2025
Splunk Security Update | Public Sector Summit Germany 2025Splunk Security Update | Public Sector Summit Germany 2025
Splunk Security Update | Public Sector Summit Germany 2025
Splunk
 
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul
 
Technology Trends in 2025: AI and Big Data Analytics
Technology Trends in 2025: AI and Big Data AnalyticsTechnology Trends in 2025: AI and Big Data Analytics
Technology Trends in 2025: AI and Big Data Analytics
InData Labs
 
AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...
AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...
AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...
SOFTTECHHUB
 
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Aqusag Technologies
 
Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...
Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...
Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...
Impelsys Inc.
 
Role of Data Annotation Services in AI-Powered Manufacturing
Role of Data Annotation Services in AI-Powered ManufacturingRole of Data Annotation Services in AI-Powered Manufacturing
Role of Data Annotation Services in AI-Powered Manufacturing
Andrew Leo
 
Andrew Marnell: Transforming Business Strategy Through Data-Driven Insights
Andrew Marnell: Transforming Business Strategy Through Data-Driven InsightsAndrew Marnell: Transforming Business Strategy Through Data-Driven Insights
Andrew Marnell: Transforming Business Strategy Through Data-Driven Insights
Andrew Marnell
 
DevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptx
DevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptxDevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptx
DevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptx
Justin Reock
 
Greenhouse_Monitoring_Presentation.pptx.
Greenhouse_Monitoring_Presentation.pptx.Greenhouse_Monitoring_Presentation.pptx.
Greenhouse_Monitoring_Presentation.pptx.
hpbmnnxrvb
 
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
BookNet Canada
 
Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep Dive
Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep DiveDesigning Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep Dive
Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep Dive
ScyllaDB
 
Drupalcamp Finland – Measuring Front-end Energy Consumption
Drupalcamp Finland – Measuring Front-end Energy ConsumptionDrupalcamp Finland – Measuring Front-end Energy Consumption
Drupalcamp Finland – Measuring Front-end Energy Consumption
Exove
 
How Can I use the AI Hype in my Business Context?
How Can I use the AI Hype in my Business Context?How Can I use the AI Hype in my Business Context?
How Can I use the AI Hype in my Business Context?
Daniel Lehner
 
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdfSAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
Precisely
 
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptxIncreasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Anoop Ashok
 
Quantum Computing Quick Research Guide by Arthur Morgan
Quantum Computing Quick Research Guide by Arthur MorganQuantum Computing Quick Research Guide by Arthur Morgan
Quantum Computing Quick Research Guide by Arthur Morgan
Arthur Morgan
 
Linux Support for SMARC: How Toradex Empowers Embedded Developers
Linux Support for SMARC: How Toradex Empowers Embedded DevelopersLinux Support for SMARC: How Toradex Empowers Embedded Developers
Linux Support for SMARC: How Toradex Empowers Embedded Developers
Toradex
 
Mobile App Development Company in Saudi Arabia
Mobile App Development Company in Saudi ArabiaMobile App Development Company in Saudi Arabia
Mobile App Development Company in Saudi Arabia
Steve Jonas
 
Build Your Own Copilot & Agents For Devs
Build Your Own Copilot & Agents For DevsBuild Your Own Copilot & Agents For Devs
Build Your Own Copilot & Agents For Devs
Brian McKeiver
 
Splunk Security Update | Public Sector Summit Germany 2025
Splunk Security Update | Public Sector Summit Germany 2025Splunk Security Update | Public Sector Summit Germany 2025
Splunk Security Update | Public Sector Summit Germany 2025
Splunk
 
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul
 
Technology Trends in 2025: AI and Big Data Analytics
Technology Trends in 2025: AI and Big Data AnalyticsTechnology Trends in 2025: AI and Big Data Analytics
Technology Trends in 2025: AI and Big Data Analytics
InData Labs
 
AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...
AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...
AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...
SOFTTECHHUB
 
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Aqusag Technologies
 
Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...
Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...
Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...
Impelsys Inc.
 

AngularJS + NancyFx + MongoDB = The best trio for ultimate SPA by Bojan Veljanovski

  • 1. @bojanv91 Angular JS + NancyFx + MongoDB = Ultimate Trio For Building SPA apps Bojan Veljanovski, Software Engineer & Lead Technology Researcher, HASELT
  • 3. @bojanv91 Bojan Veljanovski Software Engineer and Lead Technology Researcher, HASELT Microsoft Certified Professional Technical Speaker  Ex - Microsoft Student Partner  Co-Founding member, Leader & Speaker of FINKI Tech Club
  • 4. “It's not longer good enough to build web apps around full page loads and then progressively enhance them to behave more dynamically .” - Throne of JS Conference, 2012
  • 5. Traditional Web App Server Browser Page HTML Web Page Navigate Page HTML Web Page
  • 6. Next-Gen Web The web is moving to the client
  • 7. What’s in the session? What is Single Page Application – and why it matters Basic concepts for successful SPA – and tools for building it How to build complete end-to-end SPA in few steps – e.g. Let’s c0de!
  • 8. What is SPA? Rich and responsive web application All HTML/CSS/JS are loaded onto one page New content is pulled via AJAX UI interactions are handled in the browser Examples: – GitHub, Gmail, Azure Management Portal
  • 9. Characteristics of good SPAs Based on HTML, CSS and JavaScript Does NOT break the browser Fast and responsive – Should feel like native application Reduces server overhead
  • 10. How SPA works Web UI HTML/CSS/JS REST Services JSON / XML Server Client
  • 11. Common SPA features MVC - based Data-binding (2-way) Declarative programming Routing Encourages modularization
  • 14. Angular.js Very light framework Large community Great documentation Encourages good design patterns Ideal for CRUD apps
  • 19. Nancy (Back-end) Lightweight framework for building HTTP services Open Source C#/.NET/Mono Inspired by Sinatra from Ruby world You can write Hello World Nancy app into a single tweet (DEMO!)
  • 20. MongoDB (Storage) NoSQL Open-source Document-oriented storage – JSON-style documents Scalable LINQ support with C# driver
  • 21. Source Code of the Demo on GitHub: http://bit.ly/JqrJWm LET’S C0DE
  • 22. Outcomes from the SPA approach Front-end becomes almost Native Back-end becomes just Clean and Thin API Storage becomes natural for the Web (JSON)
  • 23. Use cases when to go to SPA… Highly interactive web apps Data intensive web apps Mobile web apps – With offline support (cache manifest, local storage) Apps meant to be used for long continuous period
  • 24. …but careful, SPA roads are bumpy Code duplication on client and server can occur Secure your APIs SPA stacks depend on many 3-rd party libraries, beware of compatibility issues Step learning curve Strong JavaScript skills are required
  • 25. Questions?  Complete electronic evaluation forms on the computers in the hall and enter to win! – Telerik Ultimate Collection – CodeSmith Tools Generator Pro Personal – JetBrains ReSharper – Seavus EDC training vouchers – Pluralsight subscriptions – and many more…

Editor's Notes

  • #16: Views, Models, Controllers, $scope the glue between them
  • #20: Inspired by Sinatra (Ruby DSL for building web apps)The goal is to stay away as much as possible and provide-super-duper happy path to all interactionspublic class Module : NancyModule { public Module() { Get["/greet/{name}"] = x => { return string.Concat("Hello ", x.name); }; } }