Git Product home page Git Product logo

client-side-application-course's Introduction

** _We are now fully booked for this course_ **

react logo e-conomic logo

Learn how to build and architect modern client side applications with React at e-conomic

Interested in learning how to build client side (browser) application with React and Redux? Look no further. This spring e-conomic will host a weekly class, where you can come and learn together with full time developers, that want to learn as well. We will create a space in e-conomic's development department where you have the time to learn, and where you can get help and feedback, in a nice environment in central Copenhagen. At e-conomic we have been pushing code using React to production for more than 2 years and we would love to share our experiences and learnings with you.

What will we be doing?

We will watch and follow different series of online courses and talks, and we will complement with our own experiences. The subjects will be a mix of how to use React for making scalable applications and how to make good design and architectural decisions when working with javascript in general.
It is important that you can work independently and already have some basic programming background. We will try to cover a lot of material and also understand things in depth. So expect to spend at least one full day a week on this course. You will get weekly supervision, code review, and feedback from 2-3 professional developers, that will follow the course with you. To round off the course you will build an application, that could potentially be market ready. We will pitch some ideas for what you can build, but it is up to you. The goal is to build an application that includes a substantial part of the material we have covered.

Check the syllabus to get a sense of what we will touch during this course.

Ok, so how much is it?

It's free. We have limited slots open, but the course is free of charge. While e-conomic will supply the location, coffee, and fresh fruit, you must bring your own hard- and software.

So what is the catch?

There is no catch. We at e-conomic would like to get contact to new and future developers, and show you that e-conomic is a nice place to spend your working hours. We will not dictate what kind of app you can and cannot build. The aim of this course is for you to learn! No strings attached.

Practicalities

When and where

The class will be on:

Tuesdays from 12 o'clock starting the 2th of February 2016
@ e-conomic nordic, Langebrogade 1, 1411 København K

Last course day will be around end-of-April/start-of-May, or at least before end of semesters at the universities..

Direct any questions to our developer Morten at [email protected].

Prerequisites

This course will not cover the basics of programming and computer science.

Before attending this course you must have some programming experience. In particular, you should have touched upon developing client-side applications and be comfortable with javascript.

Furthermore, as you will be working together with other students, you must have some basic knowledge of working with revision control software. At e-conomic we use Git, and we strongly urge you to do so too. While we will gladly help you, there will be no lessons on Git.

Since most of the front-end community is a bit windows terrified, a lot of the tools we'll be using is intended the run on mac. That being said, it's not a prerequisite for following the course and a good laptop running windows (7+) will do just fine.

Sign up

Create a pull request to this repository where you have added your GitHub username to the list of applicants below.

Remember to put your email in the comment of the PR
There will be a follow-up email some time after you have successfully signed up.

Applicants (GitHub username)

  • hulvei3 (instructor)
  • calinilie (instructor)
  • nativix
  • eikooc
  • soerendalby
  • lauritzsh
  • petergreve
  • dimitriosv
  • AndreasHassing (can only attend if class hours are moved to monday)
  • denlillemand
  • JonArnfred
  • memphis88
  • pcolliander
  • BennyTordrupVisma
  • kosmonautas
  • wintermotes

Course description

Syllabus

Please note, this outline is an approximation for the course schedule and subject to adjustments.

  • Week 1: Hello + Practicalities.
    • why this course?
    • a few words on JavaScript
    • what is a client application?
    • Superficial React intro
    • Hello world React app
  • Week 2: Dive into React
    • Why React? Design considerations behind React, virtual DOM, how it works
    • Motivation behind React
  • Week 3: Dependency management in javascript
    • understanding modules
    • npm
    • webpack
    • Deploy the application
  • Week 4: One way data flow - Flux part 1
    • What is Flux and why should I care
  • Week 5: One way data flow - Flux part 2
  • Week 6: Asynchronous operations
  • Week 7: Testing client-side applications - part 1
  • Week 8: Testing client-side applications - part 2
  • Week 9: Testing client-side applications - part 3
  • Week 10 - project
  • Week 11 - project
  • Week 12 - project
  • Week 13 - project

If time permits we will also look into building cross-platform client applications for iOS and Android with React Native.

Project description (ITU version)

For ITU students. The following is a draft for what a project description could look like in the ITU project base, as an independent ECTS approved project.

Project titel (Dansk): //TODO

Project title (English): Developing Client Side applications with JavaScript and React

Problem statement: Learn how to develop client side web applications written in JavaScript and using React library. These technologies are now widely used in the IT industry, but currently not covered in other courses offered at ITU.

Method: Take weekly lectures led by three full-time developers from e-conomic. The lectures will - as a minimum - cover the material listed in the syllabus of the course. Lectures will be held at e-conomic nordic at their office on Langebrogade in Copenhagen. We will wrap up the course by developing a small client-side web application that, as a minimum, incorporates the theory which has been presented throughout the lectures. Students will present their final projects in teams of 2 or 3.

After the project the student must be able to:

  • demonstrate an understanding of the Javascript programming language and reflect upon differences and parallels to previously know programming languages e.g. Java or C#
  • explain the characteristics of a client application
  • explain the design decision behind React
  • demonstrate a solid understanding of the virtual DOM and how it affects HTML processing and rendering performance
  • demonstrate a solid understanding of the flux design pattern and how it differs from MVC and MVVM
  • explain the differences between immutable and mutable data structures
  • design, write and execute unit tests in JavaScript
  • write and deploy a client side web application written in JavaScript

To hand in: A client side web application that involves the concepts covered throughout the course. This should include, but is not limited to, creating custom react components, integration with a web service, local persistence. A short technical paper (8-10 pages) discussing the implementation.

Other

This is the second course from e-conomic, following up on our Swift course in from the fall 2015

client-side-application-course's People

Contributors

andershqst avatar andreashassing avatar bstordrup avatar calinilie avatar denlillemand avatar dimitriosv avatar eikooc avatar hulvei3 avatar jonarnfred avatar kosmonautas avatar lauritzsh avatar memphis88 avatar nati-lara avatar pcolliander avatar pdsorensen avatar petergreve avatar soerendalby avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

client-side-application-course's Issues

Can't come today

Do you record the presentations? Or is it just bad luck?
I will come next week. What will I miss?

istanbul to process more that one test.js file

When creating the unit tests for the code, I put the tests into multiple .js files as I did not want to create one huge test file for all the classes.

But how do I make istanbul to process a set of files in a directory instead of just the single file being passed as parameter?

SOAP client?

Hi

Does any of you know of a good SOAP client for calling Windows Communication Foundation services from Javascript?

Executing onClick in render

Hi

Morten, can you see why my code executes the onClick of the buttons in the CustomerEdit component when rendering?

Assignment 2 issue

I am almost done but for some obscure reason I get double span elements for each message submitted. I also noticed that when I insert the first message in the array, the component "ComponentBox" re-renders with every press of a key on the text-field.

Edit: It's double span elements as children of a single span element for every message submitted.

<span class="" data-reactid=".0.2.$0">
    <span data-reactid=".0.2.$0.0"></span>
    <span data-reactid=".0.2.$0.1">asdf</span><br data-reactid=".0.2.$0.2">
</span>

Executing JavaScript files locally

If you are using Chrome and try to put your JavaScript code in a separate .js file, this will fail when you run a local html file including that script. It will result in this error:

XMLHttpRequest cannot load file:///C:/Git/e-conomic/client-side-application-course/BennyTordrupVisma/Week2/Ass3/script.js. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

This is a security feature in Chrome that it does not allow cross-origin requests.

However, this can be circumvented - also without hosting a local web server as described in this thread.

Basically, the trick is to create a shortcut for Chrome where you specify the following parameters:

--user-data-dir="C:/Chrome dev session" --disable-web-security

You have to have the directory "C:\Chrome dev session" created on disk.

What it does is that it launches Chrome in a new session with user data stored in the specified directory. the second parameter turns off web security (and hence allows cross-origin requests).

BEWARE - THIS SHOULD ONLY BE USED TO TEST SCRIPTS LOCALLY.

Do not use this instance of the browser to go on the internet. Your computere will be volnurable.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.