Introduction

In this section, we make a brief introduction to React Native. We set up machines for all the people that haven’t done that yet. By the end, attendees can create a new project, run it and understand tools available.

Back to JavaScript

In this section, we go through latest ES6/ES7 features that were added, like import / export syntax or fat arrow functions. We also cover basics of React (or just refresh them for people already experienced), like component lifecycle and/or JSX. All these are run and live tested on an app set up in the previous section.

– List all `ES6` and `ES7` features (one per slide, w/o going into details)

– Explain how the code is transpiled

– Explain JSX

– React Component lifecycle

– Open discussion about other features

– A couple of exercises to make everyone comfortable with React / JavaScript

Core components

In this section, we cover the basic components, like `<View />` & `<Touchable />`.

– Describe all core components and their `props`

– A couple of exercises based on default `init` template:

– Add few buttons and test out handlers (with `bind` preferably)

– Add a bunch of different `<View />`s

Styling

In this section, we, describe `StyleSheet` API, how it implements flexbox and how’s that different from CSS.

– Describe StyleSheet, what are available values, how it works

– Demonstrate `Flexbox`

– Mention that there are UI kits, but we are not going to use them as it’s too advanced for now

– Mention that there are cross-platform styling techniques, like styled-components one can use

– A bunch of exercises to get attendees more familiar with the styling, esp.:

– Flexbox and its properties – implement column/grid layout as presented on a slide

– <Text /> number of lines

Navigation

In this section, we demonstrate basic concepts of navigation. We also brief attendees into how’s JS navigation different from fully native one. We list available alternatives as well what we will use throughout today.

– List available navigation solutions

– Brief readers into the one that was selected

– Make them aware of the API and how to think of the route hierarchy

– A couple of exercises working on current `init` template, e.g convert app to a stack, so we can push a new route

Lists

In this section, we describe lists and why they are so important in React Native. We describe available alternatives and list how’s `<ScrollView />` different than `<FlatList /> (and <SectionList />)` and when to use each.

– List available scroll solutions

– Explain when to use each

– Describe performance optimizations

– Warn about common pitfalls / issues

– As a demo task, one can create a view that has a list of contacts and each of them can be tapped to move to a new screen (with details)

Cross Platform APIs

We will discuss and implement the most used React Native APIs that work cross platform

IOS specific APIs

We will discuss and implement the most used iOS specific React Native APIs

Android specific APIs

We will discuss and implement the most used Android specific React Native APIs

Persistence

In this section, we describe how persistence is done with React Native and how it can be achieved using other technologies.

– Demonstrate persistence using AsyncStorage

– Exercise attendees to persist stuff (literal, more advanced JSON)

– Demonstrate available APIs, like `multiSet` and when it’s better to use what – Mention other tools like `realm`

Animations

In this section, we will examine different approaches to animating elements within the app. Specifically, we will check `LayoutAnimation` API and the better – `Animated`. We will briefly talk about performance concerns as well.

Last week I had joined Microsoft Azure Summit 2018 Jakarta , Indonesia. This event was targeted toward Microsoft digital transformation technologies. Azure and AI technologies such as Azure Machine learning and CNTK highlighted at the AI track.

Lot of companies in Indonesia looking forward for digital transformation with Microsoft technology stack. Some of companies already build solutions around azure and AI technologies.

One session was conducted by Toyota motors Indonesia. They highlighted how they integrated azure machine learning for demand forecasting. And they are going to implement more solutions with AI.

Around 600 attended this conference. It was held at Balai Kartini Jakarta , Indonesia.

In this course, students will learn to develop ASP.NET MVC applications using .NET Framework on server side and using Angularjs framework on client side. Using MVC on both server and client side allows separation of responsibilities within code which makes applications easier to maintain and also improves performance.

OBJECTIVES

In this training, attendees will learn how to:

· Define MVC on server and client side

· Create MVC and Web API applications using ASP.NET MVC on server side

· Create single page web applications using the MVC pattern of AngularJS

· Understand the programming model provided by the AngularJS framework

· Define Angular controllers and directives

· Control Angular data bindings

· Implement Responsive Web Applications with AngularJS

DURATION

3 Days

CHAPTER 1. INTRODUCTION TO ASP.NET MVC

· Review of ASP.NET Web Forms

· Advantages and Disadvantages of Web Forms

· Model-View-Controller Pattern

· ASP.NET MVC

· Advantages and Disadvantages of ASP.NET MVC

· Goals of ASP.NET MVC

CHAPTER 2. INTRODUCTION TO ANGULARJS

· What is AngularJS?

· Scope and Goal of AngularJS

· Using AngularJS

· A Very Simple AngularJS Application

· Building Blocks of an AngularJS Application

· Use of Model View Controller (MVC) Pattern

· A Simple MVC Application

CHAPTER 3. ANGULARJS EXPRESSIONS

· Operations Supported in Expressions

· AngularJS Expressions vs JavaScript Expressions

· AngularJS Expressions are Safe to Use!

· Examples of ng-src and ng-href Directives

CHAPTER 4. WORKING WITH FORMS

· Forms and AngularJS

· Scope and Data Binding

· Role of a Form

· Using Input Text Box

· Using Radio Buttons

· Using Checkbox

· Using Checkbox – Advanced

· Using Select

· Reacting to Model Changes in a Declarative Way

· Example of Using the ng-change Directive

CHAPTER 5. Validation

· Introduction to Form Validation

· Validation and Model Binding

· Input Type Validation

· Validation Directives

· A Note About "required"

· Detecting Validation State

· Showing Error Message

· Other Status Variables

· Styling Input Fields

· Styling Other Areas

· Summary

CHAPTER 6. AngularJS Responsive Web Apps

· Setting up an MVC 5 Web Application

· Bundling and Minification

· A View for Our Mini-SPA

· Minifying AngularJS Scripts

· Accessing MVC from an Angular Service

· Client-Side Promises

· Passing Form Data to Controllers

· Validating the View Model

· Showing Errors on the Client

· Using Web API 2

By- Uditha Bandara specializes in Microsoft Development technologies. He is the South East Asia`s First XNA/DirectX MVP (Most Valuable Professional). He had delivered sessions at various events and conferences in Hong Kong, Malaysia, Singapore, Sri Lanka and India. He has published several books,articles, tutorials, and game demos on his Blog – https://uditha.wordpress.com