This document discusses recent trends in frontend development, including:
1. Incremental DOM provides an efficient way to manipulate the DOM by only updating what has changed, using less memory than Virtual DOM.
2. Frameworks like AngularJS and React introduced new approaches like two-way data binding, virtual DOM, and component-based architectures to improve maintainability.
3. Architectures are shifting toward splitting responsibilities between server and client using approaches like single page applications, server-side rendering, and universal JavaScript.
HTML5 and CSS3: does now really mean now?Chris Mills
Code at http://people.opera.com/cmills/css3book/css3-html5-dnrmn.zip. The browser vendors love them! The browser fans and cutting edge designers are producing some really remarkable stuff, but what do HTML5 and CSS3 really mean for you, the pragmatic designer on the street? If you sidle up to one of those guys and whisper "but what about IE6 support", they are likely to slap you in the face, or run away with their hands clamped over their ears, yelling "la lala lala, I can't hear you." In this talk, Chris Mills will have a look at some of the new features of HTML5 and CSS3 - new semantics, video, media queries, rounded corners, web fonts, drop shadows and more. He will show real world examples, and then look at how they actually perform on those shady older browsers we are often called on to support. He will then look at strategies for providing support for those older browsers, including using JavaScript, fallbacks, and progressive enhancement.
Component-Oriented Web Development with DartC4Media
Video and slides synchronized, mp3 and slide download available at URL http://bit.ly/170xwtC.
Kevin Moore explains doing client-side data-binding, visual templates, and custom HTML elements in modern browsers with Dart, while providing forward compatibility with emerging web standards. Filmed at qconnewyork.com.
Kevin Moore is a consultant specializing in open source web technologies. His experience includes UI platforms in .NET, web applications in Rails, and cutting edge games in Javascript. Kevin is committer and Google Developer Expert for Dart. His projects have highlighted the potential for building rich experiences with Dart.
HTML5 and CSS3: does now really mean now?Chris Mills
Code at http://people.opera.com/cmills/css3book/css3-html5-dnrmn.zip. The browser vendors love them! The browser fans and cutting edge designers are producing some really remarkable stuff, but what do HTML5 and CSS3 really mean for you, the pragmatic designer on the street? If you sidle up to one of those guys and whisper "but what about IE6 support", they are likely to slap you in the face, or run away with their hands clamped over their ears, yelling "la lala lala, I can't hear you." In this talk, Chris Mills will have a look at some of the new features of HTML5 and CSS3 - new semantics, video, media queries, rounded corners, web fonts, drop shadows and more. He will show real world examples, and then look at how they actually perform on those shady older browsers we are often called on to support. He will then look at strategies for providing support for those older browsers, including using JavaScript, fallbacks, and progressive enhancement.
Component-Oriented Web Development with DartC4Media
Video and slides synchronized, mp3 and slide download available at URL http://bit.ly/170xwtC.
Kevin Moore explains doing client-side data-binding, visual templates, and custom HTML elements in modern browsers with Dart, while providing forward compatibility with emerging web standards. Filmed at qconnewyork.com.
Kevin Moore is a consultant specializing in open source web technologies. His experience includes UI platforms in .NET, web applications in Rails, and cutting edge games in Javascript. Kevin is committer and Google Developer Expert for Dart. His projects have highlighted the potential for building rich experiences with Dart.
Front End Best Practices: A Selection of Best Practices, Tips, Tricks & Good Advice For Today’s Front End Development. Practices mentioned in this presentation range from basic principles to more advanced tools and techniques. By Holger Bartel for WomenWhoCodeHK 23/07/2014
Programmers building apps that work on every device and platform face many challenges. Despite the advances in browsers, tools and specs designed to meet those challenges, HTML is still an extremely limited language for composing complex apps. Web Components solve that problem by letting programmers extend HTML. This session shows how to use Web Components to build modern complex apps with reusable, responsive, framework-agnostic Web Components that can run (almost) everywhere. We'll talk about all the pieces that make this work, including native templates, Shadow DOM, custom elements, and polyfill libraries like polymer and x-tag.
Web Components + Backbone: a Game-Changing CombinationAndrew Rota
Web Components promise to change how we think about modularity on the web, and when combined with the structure and organization of Backbone.js we can create portable, dynamic, encapsulated UI modules that fit into any web application.
Front End Best Practices: A Selection of Best Practices, Tips, Tricks & Good Advice For Today’s Front End Development. Practices mentioned in this presentation range from basic principles to more advanced tools and techniques. By Holger Bartel for WomenWhoCodeHK 23/07/2014
Programmers building apps that work on every device and platform face many challenges. Despite the advances in browsers, tools and specs designed to meet those challenges, HTML is still an extremely limited language for composing complex apps. Web Components solve that problem by letting programmers extend HTML. This session shows how to use Web Components to build modern complex apps with reusable, responsive, framework-agnostic Web Components that can run (almost) everywhere. We'll talk about all the pieces that make this work, including native templates, Shadow DOM, custom elements, and polyfill libraries like polymer and x-tag.
Web Components + Backbone: a Game-Changing CombinationAndrew Rota
Web Components promise to change how we think about modularity on the web, and when combined with the structure and organization of Backbone.js we can create portable, dynamic, encapsulated UI modules that fit into any web application.
Red Goldfish - Motivating Sales and Loyalty Through Shared Passion and PurposeStan Phelps
Red Goldfish is the fifth color in the Goldfish Series of books. It focuses on how purpose is driving loyalty and becoming the ultimate differentiator in business.
Stan Phelps is the founder of PurpleGoldfish.com, a speaking and training consultancy that helps brands obtain customers that are up to four times as valuable as ordinary customers. He’s a contributor to Forbes and the author of Purple Goldfish, Green Goldfish, Golden Goldfish, Blue Goldfish, and Purple Goldfish - Service Edition. He works with senior leaders to focus on meaningful differentiation to win the hearts of both employees and customers. Driven by client objectives and inspired by bold vision, Stan creates custom keynotes, workshops, and programs that are memorable and on brand, inspiring businesses to become REMARK-able by design.
Contact Stan at stan@purplegoldfish.com or call 919.360.4702.
Growth Hacking: Offbeat Ways To Grow Your BusinessSujan Patel
Slides from my talk at Flipmyfunnel.com. In this presentation I go through my simple growth hacking framework and showcase 13 offbeat ways to grow your business
There's a lot of cool JS frameworks out there and it seems you can't go more than a couple of weeks without a new one popping up. So what's special about React?
In this session I will cover some of the basic principles of React and will show how React fits perfectly into the MVC pattern, giving you all the goodness of React on the client with the stability of .NET on the server. I will end up with some examples of how to implement this an MVC project using React.NET and TypeScript.
More details at www.macsdickinson.com/talks/react
* Почему Angular 2 такой быстрый и как его ускорить еще сильнее?
* Как работает Change Detection механизм и как им управлять?
* Зачем нам Zone.js и Функциональное Реактивное Программирование?
* Как работать с Redux и Mobx в Angular 2 и что можно от этого выиграть?
Об этом и ряде других вещей вы узнаете из этого доклада.
2016 is going to be the year of Virtual DOM. React.js one of the most popular implementation of Virtual DOM. But this time we won't focus on React.js. We will be focusing on what is the concept of Virtual DOM, what's the benefits, and how to use it without React.js. All of those concepts will help you understand this newest DOM manipulation technique and better work with any Virtual DOM implementations such React.js.
Polymer vs other libraries (Devfest Ukraine 2015)jskvara
Most modern front-end JavaScript libraries provide support for component based development. Components help separate large applications into standalone building blocks with specified communication API. Let's compare Polymer elements with components from React, Angular.
Boosting performance for Webpack and React application. Steps to improve build speed and bundle size. Much of this applies to Angular, SASS, Less, and Javascript (ES6) overall.
JavaOne2016 - How to Generate Customized Java 8 Code from Your Database [TUT4...Speedment, Inc.
The best code is the one you never need to write. Using code generation and automated builds, you can minimize the risk of human error when developing software, but how do you maintain control over code when large parts of it are handed over to a machine? In this tutorial, you will learn how to use open source software to create and control code automation. You will see how you can generate a completely object-oriented domain model by automatically analyzing your database schemas. Every aspect of the process is transparent and configurable, giving you, as a developer, 100 percent control of the generated code. This will not only increase your productivity but also help you build safer, more maintainable Java applications and is a perfect solution for Microservices.
How to JavaOne 2016 - Generate Customized Java 8 Code from Your Database [TUT...Malin Weiss
The best code is the one you never need to write. Using code generation and automated builds, you can minimize the risk of human error when developing software, but how do you maintain control over code when large parts of it are handed over to a machine? In this tutorial, you will learn how to use open source software to create and control code automation. You will see how you can generate a completely object-oriented domain model by automatically analyzing your database schemas. Every aspect of the process is transparent and configurable, giving you, as a developer, 100 percent control of the generated code. This will not only increase your productivity but also help you build safer, more maintainable Java applications and is a perfect solution for Microservices.
Introduction in the JavaScript Programming language typically used in the front end of Web Applications. More information can be found at : https://www.spiraltrain.nl/course-javascript-programming/?lang=en
Web Development with Delphi and React - ITDevCon 2016Marco Breveglieri
React is the library created by Facebook to manage user interfaces inside the famous social network. In this talk we'll se how you can develop Web applications with a highly dynamic and performing UI connected to a Web API provided by a Delphi backend.
dmBridge and dmMonocle are two technologies developed by Alex Dolski and Brian Egan, respectively, which significantly enhance the default CONTENTdm web templates and image viewer. This is the presentation was given at the OCLC Western CONTENTdm Users Group meeting.
It tells about how dom really used in javascript & html.And it tells about its levels and its w3c standards. And some Dom example programs with source code and screenshots.
How to generate customized java 8 code from your databaseSpeedment, Inc.
Did you know that database classes, that require many lines of Java and SQL code, may be replaced with a single line of Java 8 code? In this tutorial session you will learn how to use standard Java 8 Streams as an alternative to traditional Object Relational Mappers (ORM). We will use the open-source tool Speedment to show how development speed can be increased and how the application code can be more concise and run faster.
Silicon Valley JUG - How to generate customized java 8 code from your databaseSpeedment, Inc.
The best code is the one you never need to write. Using code generation and automated builds you can minimize the risk of human error when developing software, but how do you maintain control over code when large parts of it is handed over to a machine? In this tutorial, you will learn how to use open-source software to create and control code automation. You will see how you can generate a completely object-oriented domain model by automatically analyzing your database schemas. Every aspect of the process is transparent and configurable, giving you as a developer 100% control of the generated code. This will not only increase your productivity, but also help you build safer and more maintainable Java applications.
JavaScript front end performance optimizationsChris Love
No one wants a slow loading, slow reacting application. As page weight has increased so has the dependency on JavaScript to drive rich user experiences. Today many pages load over 2MBs of JavaScript, but is this healthy? Do your scripts and dependencies perform well? In this session we will review common JavaScript performance bottlenecks, how to detect them and how to eliminate them.
This session will review common bad coding syntax, architecture and how to replace them with better alternatives. You will also be exposed to caching, code organization, build and deployment best practices that produce the best user experiences. Finally, you will see how to use the navigation timing and performance timing APIs to fine tune your applications to produce a fast, lean application your customers will love.
Hybrid optimization of pumped hydro system and solar- Engr. Abdul-Azeez.pdffxintegritypublishin
Advancements in technology unveil a myriad of electrical and electronic breakthroughs geared towards efficiently harnessing limited resources to meet human energy demands. The optimization of hybrid solar PV panels and pumped hydro energy supply systems plays a pivotal role in utilizing natural resources effectively. This initiative not only benefits humanity but also fosters environmental sustainability. The study investigated the design optimization of these hybrid systems, focusing on understanding solar radiation patterns, identifying geographical influences on solar radiation, formulating a mathematical model for system optimization, and determining the optimal configuration of PV panels and pumped hydro storage. Through a comparative analysis approach and eight weeks of data collection, the study addressed key research questions related to solar radiation patterns and optimal system design. The findings highlighted regions with heightened solar radiation levels, showcasing substantial potential for power generation and emphasizing the system's efficiency. Optimizing system design significantly boosted power generation, promoted renewable energy utilization, and enhanced energy storage capacity. The study underscored the benefits of optimizing hybrid solar PV panels and pumped hydro energy supply systems for sustainable energy usage. Optimizing the design of solar PV panels and pumped hydro energy supply systems as examined across diverse climatic conditions in a developing country, not only enhances power generation but also improves the integration of renewable energy sources and boosts energy storage capacities, particularly beneficial for less economically prosperous regions. Additionally, the study provides valuable insights for advancing energy research in economically viable areas. Recommendations included conducting site-specific assessments, utilizing advanced modeling tools, implementing regular maintenance protocols, and enhancing communication among system components.
Industrial Training at Shahjalal Fertilizer Company Limited (SFCL)MdTanvirMahtab2
This presentation is about the working procedure of Shahjalal Fertilizer Company Limited (SFCL). A Govt. owned Company of Bangladesh Chemical Industries Corporation under Ministry of Industries.
About
Indigenized remote control interface card suitable for MAFI system CCR equipment. Compatible for IDM8000 CCR. Backplane mounted serial and TCP/Ethernet communication module for CCR remote access. IDM 8000 CCR remote control on serial and TCP protocol.
• Remote control: Parallel or serial interface.
• Compatible with MAFI CCR system.
• Compatible with IDM8000 CCR.
• Compatible with Backplane mount serial communication.
• Compatible with commercial and Defence aviation CCR system.
• Remote control system for accessing CCR and allied system over serial or TCP.
• Indigenized local Support/presence in India.
• Easy in configuration using DIP switches.
Technical Specifications
Indigenized remote control interface card suitable for MAFI system CCR equipment. Compatible for IDM8000 CCR. Backplane mounted serial and TCP/Ethernet communication module for CCR remote access. IDM 8000 CCR remote control on serial and TCP protocol.
Key Features
Indigenized remote control interface card suitable for MAFI system CCR equipment. Compatible for IDM8000 CCR. Backplane mounted serial and TCP/Ethernet communication module for CCR remote access. IDM 8000 CCR remote control on serial and TCP protocol.
• Remote control: Parallel or serial interface
• Compatible with MAFI CCR system
• Copatiable with IDM8000 CCR
• Compatible with Backplane mount serial communication.
• Compatible with commercial and Defence aviation CCR system.
• Remote control system for accessing CCR and allied system over serial or TCP.
• Indigenized local Support/presence in India.
Application
• Remote control: Parallel or serial interface.
• Compatible with MAFI CCR system.
• Compatible with IDM8000 CCR.
• Compatible with Backplane mount serial communication.
• Compatible with commercial and Defence aviation CCR system.
• Remote control system for accessing CCR and allied system over serial or TCP.
• Indigenized local Support/presence in India.
• Easy in configuration using DIP switches.
Final project report on grocery store management system..pdfKamal Acharya
In today’s fast-changing business environment, it’s extremely important to be able to respond to client needs in the most effective and timely manner. If your customers wish to see your business online and have instant access to your products or services.
Online Grocery Store is an e-commerce website, which retails various grocery products. This project allows viewing various products available enables registered users to purchase desired products instantly using Paytm, UPI payment processor (Instant Pay) and also can place order by using Cash on Delivery (Pay Later) option. This project provides an easy access to Administrators and Managers to view orders placed using Pay Later and Instant Pay options.
In order to develop an e-commerce website, a number of Technologies must be studied and understood. These include multi-tiered architecture, server and client-side scripting techniques, implementation technologies, programming language (such as PHP, HTML, CSS, JavaScript) and MySQL relational databases. This is a project with the objective to develop a basic website where a consumer is provided with a shopping cart website and also to know about the technologies used to develop such a website.
This document will discuss each of the underlying technologies to create and implement an e- commerce website.
Immunizing Image Classifiers Against Localized Adversary Attacksgerogepatton
This paper addresses the vulnerability of deep learning models, particularly convolutional neural networks
(CNN)s, to adversarial attacks and presents a proactive training technique designed to counter them. We
introduce a novel volumization algorithm, which transforms 2D images into 3D volumetric representations.
When combined with 3D convolution and deep curriculum learning optimization (CLO), itsignificantly improves
the immunity of models against localized universal attacks by up to 40%. We evaluate our proposed approach
using contemporary CNN architectures and the modified Canadian Institute for Advanced Research (CIFAR-10
and CIFAR-100) and ImageNet Large Scale Visual Recognition Challenge (ILSVRC12) datasets, showcasing
accuracy improvements over previous techniques. The results indicate that the combination of the volumetric
input and curriculum learning holds significant promise for mitigating adversarial attacks without necessitating
adversary training.
5. Rendering on a Browser
Parse
HTML
Parse
HTML
Generate
DOM Tree
Generate
DOM Tree
Generate
Render Tree
Generate
Render Tree
LayoutLayout
PaintPaint
Server
HTML
Parse
CSS
Parse
CSS
Generate
CSSOM Tree
Generate
CSSOM Tree
CSS
5
6. DOM (Document Object Model)
html
head
title
[text]
body
h1
[text]
input ul
li
li
li
<html>
<head>
<title>sample</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>title</h1>
<input type="text">
<ul>
<li>abc</li>
<li>def</li>
<li>ghi</li>
</ul>
</body>
</html>
<html>
<head>
<title>sample</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>title</h1>
<input type="text">
<ul>
<li>abc</li>
<li>def</li>
<li>ghi</li>
</ul>
</body>
</html>
HTML
6
7. Dynamic Page via JavaScript
• Adding, Removing, or
Updating DOM nodes via
JavaScript.
• Reflow: Recalculate Layout
for parts of the Render
Tree.
• Repaint: Update parts of
the Screen.
Parse
HTML
Parse
HTML
Generate
DOM Tree
Generate
DOM Tree
Generate
Render Tree
Generate
Render Tree
LayoutLayout
PaintPaint
JavaScript
Change DOM Tree
7
9. DOM API
• Problems
• DOM can be changed from anywhere.
→ So to speak, Global Variables.
• Difficult to understand the relationship JavaScript and HTML.
Low Maintainable
<input type="text" id="in_el">
<div id="out_el"></div>
<input type="text" id="in_el">
<div id="out_el"></div>
HTML
window.onload = function() {
var inputEl = document.getElementById('in_el');
var outputEl = document.getElementById('out_el');
inputEl.onkeyup = function() {
outputEl.innerText = inputEl.value;
};
};
window.onload = function() {
var inputEl = document.getElementById('in_el');
var outputEl = document.getElementById('out_el');
inputEl.onkeyup = function() {
outputEl.innerText = inputEl.value;
};
};
JavaScript
9
10. Client-Side Frameworks
• jQuery can develop interactive pages, but it is not
maintainable.
• We need framework that can manage large complex
application.
• Many Client-Side Frameworks has been born in last few
years.
• AngularJS, Backbone, Ember, ExtJS, Knockout, Elm, React,
Cycle.js, Vue.js, Aurelia, Mithril
10
11. Frameworks/Libraries to pick up this time
• AngularJS
• All-in-One Web Application Framework developed by Google.
• Many Features: Data Binding, Directive, DI, Routing, Security, Test, etc.
• Angular 2 has been developed in order to solve the problems of AngularJS 1.x.
• React
• UI Building Library developed by Facebook.
• Using Virtual DOM for DOM Manipulation, JSX for Writing Templates.
• Create the new Concepts such as Flux, CSS in JS.
• Incremental DOM
• DOM Manipulation Library developed by Google.
• It has been developed in order to solve the problems of Virtual DOM.
11
12. Role of each Frameworks/Libraries
Incremental DOM
AngularJSReact
Virtual DOM
Library for
DOM Manipulation
Library for
UI building
Framework for
Client-Side
Web Application
12
13. AngularJS 1.x
• Two-Way Data Binding
• Automatic synchronization of data between the model and DOM
• If Model was changed, updates DOM.
• If DOM was changed, updates Model.
<input type="text" ng-model="value">
<div>{{value}}</div>
<input type="text" ng-model="value">
<div>{{value}}</div>
HTML
$scope.value
input
ng-model=“value”
{{value}}
DOM
Model
13
14. Two-Way Data Binding (Binding Phase)
1. Parse HTML and find binding
targets.
2. Generate $watch expressions
for each binding target.
14
DOM
Model
$watch
$watch
$watch
15. Two-Way Data Binding (Runtime Phase)
1. Change DOM element via user
operation.
2. Update Model via DOM event.
3. Evaluate all $watch
expressions.
4. If there is change in a
model, update DOM element.
5. Repeat Step 3, 4 until all
changes stabilize.
DOM
Model
$watch
$watch
$watch
15
Dirty Checking
16. Problem of Dirty Checking
• $watch expression is created for each binding target.
• All $watch expressions are evaluated every time DOM event
fired.
• If you built a complex page (e.g. with > 2000 bindings),
its rendering speed will be slow.
16
17. Improvement by Angular 2
• Tree of Components
• Change Detection Strategy
• Immutable Objects
• Observable Objects
• 100,000checks / < 10msec
17
18. React (Virtual DOM)
• React updates the whole UI in the application every time
somewhere in model was changed.
• Using Virtual DOM generated from Model.
• Virtual DOM
• It is not an actual DOM object.
• It is a plain JavaScript object that represents a real DOM
object tree.
• Efficiently Re-rendering by applying the diff generated
from Virtual DOM.
18
21. Problem of Virtual DOM
• Higher Memory Use
• React generates a new Virtual DOM tree every time of re-
rendering.
21
22. Incremental DOM
• The approach of Incremental DOM is similar to Virtual DOM.
• Walk along the Virtual DOM Tree and Read DOM Tree to figure out
changes.
• If there is no change: Do nothing.
• If there is: Generate diff and apply it to the Real DOM.
• Reduce Memory Use.
• Not as fast as other libraries. (due to access Real DOM)
22
25. Template Engine for Incremental DOM
• Incremental DOM is a low level library.
• You can choose to use templating language.
• Closure Templates
• Client and Server Side Template Engine developed by Google.
• Language-Neutral, Secure, Typing.
• JSX
• Template Engine used in React.
• JavaScript syntax extension that looks similar to XML.
• Use babel-plugin-incremental-dom.
25
26. Conclusion
• Incremental DOM has less Memory usage than Virtual DOM.
• But I think the benefits are not so large.
• If you are using Closure-Templates in Client-Side,
Incremental DOM is a good choice.
26
28. Change of Web Application Architecture
• Component
• Role of Server-Side and Client-Side
• Flux
28
29. Component
• DOM Tree can be represented as
Component Tree
• Component
• JavaScript -> Class
• HTML -> JSX
• CSS -> CSS in JS
• Pros of Component
• Readable
• Reusable (in the project)
• Maintainable
29
30. Class
30
class HelloWorld {
constructor(name) {
this.name = name;
}
getMessage() {
return "Hello, " + this.name;
}
}
class HelloWorld {
constructor(name) {
this.name = name;
}
getMessage() {
return "Hello, " + this.name;
}
}
class HelloWorld {
name:string;
constructor(name:string) {
this.name = name;
}
getMessage():string {
return "Hello, " + this.name;
}
}
class HelloWorld {
name:string;
constructor(name:string) {
this.name = name;
}
getMessage():string {
return "Hello, " + this.name;
}
}
ECMAScript 2015 TypeScript
You must use a transpiler.
(babel, closure-compiler, etc.)
31. JSX
• JavaScript syntax extension that
looks similar to XML.
• Benefits
• Concise
• Familiar Syntax
• Balanced opening and closing tags.
• ECMAScript 2015 and TypeScript
has Template Strings.
31
class App extends Component {
render() {
return <div>
<Header></Header>
<div className={container}>
{this.props.children}
</div>
</div>;
}
}
class App extends Component {
render() {
return <div>
<Header></Header>
<div className={container}>
{this.props.children}
</div>
</div>;
}
}
JSX
33. CSS Modules
• Problems of CSS in JS
• No support for pseudo-elements,
pseudo-classes, media-queries
and animations.
• No CSS prefix support.
• CSS Modules
• Local Naming
• Composition
• Sharing Between Files
• Single Responsibility Modules
33
import button from './Button.css';
class Button extends Component {
render() {
return (
<Block textAlign="center">
<button style={button}>
Click me!
</button>
</Block>
);
}
}
import button from './Button.css';
class Button extends Component {
render() {
return (
<Block textAlign="center">
<button style={button}>
Click me!
</button>
</Block>
);
}
}
JSX
34. WebPack
• Bundler for Modules
• Can load parts such as CommonJs, AMD, ES6 modules, CSS, Images,
JSON, Coffeescript, LESS, ...
• Can create multiple chunks.
• Dependencies are resolved.
• Preprocess (e.g. Babel, JSX, CSS Module, etc.)
• We may not require build tools such as Grunt, Gulp.
34
35. Role of Server-Side and Client-Side
• Server-Side MVC / Client-Side MVC
• Single Page Application
• Server-Side Rendering
• Universal JavaScript
35
36. Server-Side MVC / Client-Side MVC
36
Model
Controller
View
Browser
Model
Model
Controller
View
Browser
DOM
Manipulation
Client
Server
Client
Server
RequestResponse
RequestResponse
37. Single Page Application (SPA)
• SPA has ability to re-rendering UI without requiring a
server to retrieve HTML.
• SPA needs a Client-Side routing that allows you to
navigate around a web page, using the HTML5 history API.
• SPA offers native application like experience.
37
38. Server-Side Rendering
• Problem of Client-Side Rendering
• First Rendering
• SEO
• Preview
• Render the Client-Side Application on Server-Side when a
first Request.
• Implementation of Server-Side Rendering
• Use Node.js
• Use JavaScript Engine each platform (Nashorn, go-duktape, etc.)
• Use PhantomJS (Headless Browser)
38
39. Universal (Isomorphic) JavaScript
• Sharing code between Server and Client.
• Pros
• Reuse code.
• Server-Side Rendering.
• Cons
• Be limited Server-Side Platform.
• Application may be complex.
• Singleton problem.
• Can’t run parts of code on server.
39
40. Flux
• Flux is the Application
Architecture for Client-Side Web
Application.
• Flux ensures a unidirectional flow
of data between a system’s
components.
• Flux Implementations.
• Facebook Flux, Flummox, Redux, Reflux,
Freezer, flumpt
40※ http://www.infoq.com/news/2014/05/facebook-mvc-flux
MVC does not scale?
41. An Implementation of Flux (Redux)
41
Action
Action
Action
Reducer
Reducer
Reducer
Store
Dispatch
Store
Current
New
Create
Apply
Event
View (Component Tree)
42. Role of classes in Redux
• Action
• Payloads of information
that send data from user
input to the store.
• Like a Command-Class in
Command-Pattern.
• Reducer
• Change Application’s State
in response to Action.
42
• Store
• Holds Application state.
• All application state is
stored as a single object.
• View
• Re-rendering templates
using the Store.
43. Pros of Redux (Flux)
• Readable
• Clear role of each class
• One-Way Data Flow
• Debuggable
• Redux DevTools
• History of every State and Action Payload.
• Rollback
• Testable
• Store only has state.
• Reducer is pure and doesn’t have any side effects.
• High Maintainability!
43
44. Conclusion
• Web applications are increasingly complex.
We need some new development process.
• Front-End Development keeps changing fast.
• Browsers Improvement
• ECMAScript/AltJS Improvement
• Frameworks Improvement
• We should keep Learning!
44