跳到主要内容

6 篇博文 含有标签「javascript」

查看所有标签

Trick: How to significantly reduce NPM download time for NodeJS Web application on Docker image

· 阅读需 2 分钟
Kobkrit Viriyayudhakorn
CEO, iApp Technology

2

Docker made my life much easier! I put every web application project to its own docker container. Docker allows me to deploy web application server on any cloud or any service providers. We can customize the dependencies to any versions of libraries that we want to use, and also integrated well with any continuous integration tools (like Jenkins).

Docker is excellent, but, the biggest drawback of Docker compared to the traditional FTP upload to server, it requires significant amount of time to complies a docker image. Generally for moderate size of web application project, it takes about 6–8 minutes to produce an image.

Turn out, I found the way to optimize the time to produce an image, especially for NodeJS Web application. Most of docker image compile time is wasted due to NPM install. It contributes 95% of the time. With simple Dockerfile modification, I can reduce from 6 minute to 10 seconds for building an image if the dependencies is not changed.

Instead of writing Dockerfile in the popular format like this.

FROM node:9  
MAINTAINER Kobkrit Viriyayudhakorn (kobkrit@iapp.co.th)RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
COPY . /usr/src/app/
RUN npm installCMD [ "npm", "start" ]EXPOSE 4000

Change to this.

FROM node:9MAINTAINER Kobkrit Viriyayudhakorn (kobkrit@iapp.co.th)ADD package.json /tmp/package.json  
RUN cd /tmp && npm install
RUN mkdir -p /usr/src/app && cp -a /tmp/node_modules /usr/src/app/WORKDIR /usr/src/app
COPY . /usr/src/app/CMD [ "npm", "start" ]EXPOSE 4000

The key ideas is to change from running npm install every time when your web changes to running only when its dependencies changed. We caches the whole node_modules folder, and save it to a docker commit. If your dependencies are not changed, docker can reuse the old commit for building the new one, significantly saving your docker image building time!

The following are improvement in a real work.

I change to the new Dockerfile on build #6. I changed dependencies on build #8, and #11.

In build #1-#5, I used the first Dockerfile. I changed to the latter on build #6. In build #7, it has no dependencies changed, but in build #8, it has some dependencies change which need to re-run npm install.

[iApp] Key Course Tutorial สู่นักเขียนโปรแกรม React, React-Native และ NodeJS แบบมืออาชีพ

· 阅读需 7 分钟
Kobkrit Viriyayudhakorn
CEO, iApp Technology

Post นี้สำหรับพนักงาน iApp ใหม่ทุกท่าน ที่ทุกคนต้องได้คือ 0, 1, 7
ถ้าสาย Mobile App ต้อง 2,3 (5 — Optional)
ถ้าสาย Web Front End ต้อง 2 (5 — Optional)
ถ้าสาย Web Back End ต้อง 4,6 (5 — Optional)

Warning สาย Web Back End กำลังจะตกงานนะจ๊ะ (อยากรอดต้องเป็น Firebase จ๊ะ 5)

0. Git

ถ้า Git ยังไม่ได้ไม่ต้องพูดถึงเรื่องอื่นเลย

Try GitLearn how to use Git with Code School's interactive course, Try Git.try.github.io

  1. ES6 & Babel & Webpack

ก่อนจะเริ่ม React ได้ ต้องเขียนภาษา ES6 ให้โปรเสียก่อน
แนะนำ Course ของ Udemy เป็นหลักและอ่าน Blog ของผมและ AirBnb ผ่านๆ

ECMAScript 2015 (ES6), Babel and Webpack ExplainedStart using EcmaScript/ES6 in production and own projects today. - Free Coursewww.udemy.com

[React Native 2] Modern JavaScript Programming language with ES6/ES2015The followings are slide presentation for ITS484: Mobile App Development, SIIT, Thammasat University, Thailand (1/2016)medium.com

แนะนำให้ทวนตามใน Blog ของผมด้วย จะได้เขียนถูก Style ตามหลัก Airbnb https://github.com/airbnb/javascript

2. React & Redux

แนะนำอ่านชุดบทความของ babel coder มาก่อน (ทบทวน Webpack และ Babel ด้วย) แล้วต่อด้วยของ Udemy มี 2 เจ้าจะเอาของ Stephen Grider หรือ Leonardo Daniel ก็ได้ ต่อด้วยใช้ BoilerPlate ของ React-Production-Starter ให้เป็น หรือแต่งสดเองก็ได้

Modern React with Redux - UdemyMaster the fundamentals of React and Redux with this tutorial as you develop apps supported by NPM, Webpack, and ES6www.udemy.com

Advanced React and Redux - UdemyDetailed walkthroughs on advanced React and Redux concepts - Authentication, Testing, Middlewares, HOC's, and…www.udemy.com

[ชุดบทความ] สอนสร้าง Isomorphic Application ด้วย React.js และ Redux ใน 5 วันชุดบทความนี้ประกอบไปด้วย 5 บทความที่จะสอนคุณสร้าง Isomorphic Application ใน 5 วันwww.babelcoder.com

React Redux React-Router: From Beginner to Paid Professionallearn React, Redux, React-Router, ECMAScript2015(ES6) by creating many applications such as Todo List, YouTube and…www.udemy.com

jaredpalmer/react-production-starterreact-production-starter - React Redux boilerplate with isomorphic rendering, async react-router routes, async redux…github.com

3. React-Native + Firebase

ลองเล่นของ Udemy ก่อน แต่ไม่ค่อยครบ แล้วอ่านของ FormInit ให้พื้นฐาน React, Redux ให้แน่น แล้วมาจบด้วยของผมที่เล่น Module ครบถ้วนที่สุด อันสุดท้ายสร้าง App ด้วย IgniteJS ต่อด้วยสามารถทำ Firebase ได้

React Native Course DirectoryBuild native mobile app in iOS and Android in Single codebase by JavaScript programming language backed by Facebook.medium.com

React Native Course ตอนที่ 1: ติดตั้งบน OSXReact Native Installation for OSX ด้วยเหตุที่ React Native เป็นระบบที่ใช้สำหรับพัฒนา Native App. สำหรับทั้ง IOS แล…www.forminit.com

The Complete React Native and Redux Course - UdemyiOS and Android App Development from scratch - build fully native mobile apps ridiculously fast!www.udemy.com

infinitered/igniteignite - The unfair starting CLI, Generator, and more for React Nativegithub.com

4. สาย Server, NodeJS, Express, MongoDB, AngularJS

ดูเหมือนของ Code School จะตรงสุด ตามด้วยเรียนรู้ให้ the MEAN stack ให้เป็น เพิ่มพวก MongoDB, Mongoose, AngularJS และ Gulp ด้วยการอ่าน Doc และสุดท้ายใช้ generator-angular-fullstack ให้เป็น

The MEAN Stack | Code SchoolMEAN is a collection of JavaScript-based technologies - MongoDB, Express.js, AngularJS, and Node.js - used to develop…www.codeschool.com

MongoDB Tutorials - MongoDB Manual 3.2MongoDB Manual 3.2 MongoDB Tutorialsdocs.mongodb.com

Mongoose ODM v4.7.6Mongoose provides a straight-forward, schema-based solution to model your application data. It includes built-in type…mongoosejs.com

AngularJSAngularJS is what HTML would have been, had it been designed for building web-apps. Declarative templates with data…docs.angularjs.org

Express - Node.js web application frameworkExpress is a minimal and flexible Node.js web application framework that provides a robust set of features for web and…expressjs.com

Socket.IOEdit descriptionsocket.io

RedisRedis is an open source (BSD licensed), in-memory data structure store, used as a database, cache and message broker…redis.io

gulp.jsEdit descriptiongulpjs.com

angular-fullstack/generator-angular-fullstackgenerator-angular-fullstack - Yeoman generator for AngularJS with an Express servergithub.com

5. สาย Firebase (Serverless)

[React Native 12] Advanced Lifecycle, AppState, Firebase, Realtime Databasemedium.com

[React Native 13] Firebase Realtime Database + Authenticationmedium.com

Firebase | App success made simpleFirebase gives you the tools and infrastructure you need to build better apps and grow successful businesses.firebase.google.com

6. สาย Server

NGINX | High Performance Load Balancer, Web Server, & Reverse ProxyNGINX accelerates content and application delivery, improves security, facilitates availability and scalability for the…www.nginx.com

DockerDocker is an open platform for developers and sysadmins to build, ship, and run distributed applications, whether on…docker.com

Amazon Web Services (AWS) - Cloud Computing ServicesAmazon Web Services offers reliable, scalable, and inexpensive cloud computing services. Free to join, pay only for…aws.amazon.com

The leading operating system for PCs, tablets, phones, IoT devices, servers and the cloud | UbuntuUbuntu is an open source software platform that runs everywhere from IoT devices, the smartphone, the tablet and the PC…www.ubuntu.com

Microsoft Azure: Cloud Computing Platform & ServicesMicrosoft Azure is an open, flexible, enterprise-grade cloud computing platform. Move faster, do more, and save money…azure.microsoft.com

7. Tools ที่บริษัทใช้

JenkinsJenkins is an open source automation serverjenkins.io

fastlane - iOS and Android Automation for Continuous Deliveryfastlane is the tool to release your iOS and Android app 🚀 It handles all tedious tasks, like generating screenshots…fastlane.tools

Build software better, togetherGitHub is where people build software. More than 19 million people use GitHub to discover, fork, and contribute to over…www.github.com

ZenHub - Agile GitHub Project Management SoftwareZenHub turns GitHub into a robust project management platform. Add powerful collaboration features to your GitHub…www.zenhub.com

Slack: Be less busySlack brings all your communication together in one place. It's real-time messaging, archiving and search for modern…slack.com

React Native Course Directory

· 阅读需 4 分钟
Kobkrit Viriyayudhakorn
CEO, iApp Technology

Build native mobile app in iOS and Android in Single codebase by JavaScript programming language backed by Facebook.

Course Directory

[React Native 0] Set up React Native on Mac for iOS and Android DevelopmentThe followings are walkthrough guide for setup react-native on Mac for iOS and Android mobile app development.medium.com

[React Native 0] React-Native Setup on Windows for Android Development WalkthroughAndroid DevelopmentWalkthrough Android Developmentmedium.com

[React Native 1] Lecture 1: Introduction to React-NativeWhat is React-Native? What are differences compared with native developments.medium.com

[React Native 2] Modern JavaScript Programming language with ES6/ES2015The followings are slide presentation for ITS484: Mobile App Development, SIIT, Thammasat University, Thailand (1/2016)medium.com

[React Native 3] Setup BabelJS and ES6 on Windows and more on ES6/ES2015medium.com

[React Native 4] Basic Elements and Flexboxmedium.com

[React Native 5] State and Keyboard Input By Making BMI Calculator and Stop Watch Appmedium.com

[React Native 6] Components, Props, and Network By Making Stocks AppReact Native Components, Props, and Network By Making Stocks Appmedium.com

[React Native 7] Navigation Bar, Scene Transition, List ViewReact Native Navigation Bar, Scene Transition, ListViewmedium.com

[React Native 8] Midterm Exam Discussion, Feedback, and Term ProjectsThis post is about Midterm Exam, and Term Projects for SIIT students who enroll ITS484.medium.com

[React Native 9] Using Map in React-Native (Apple Map and Google Map)Learn how to including Apple Map and Google map into the iOS and Android mobile app written by React Native.medium.com

[React Native 11] AsyncStorage and Realm DB for In-App Database TutorialWe are doing a step-by-step tutorial how to make mobile application’s local storage by React Native AsyncStorage and…medium.com

[React Native 12] Advanced Lifecycle, AppState, Firebase, Realtime Databasemedium.com

[React Native 13] Firebase Realtime Database + Authenticationmedium.com

[React Native 14] Startup PitchingThis is a bit strange that we are talking about the Startup Pitching in the mobile app development course. But believe…medium.com

[React Native 15] Final Presentation ScheduleITS484 Presentation Schedule for Dec 6, 2016 Click here to view >> Presentation Schedulemedium.com

[React Native 2] Modern JavaScript Programming language with ES6/ES2015

· 阅读需 1 分钟
Kobkrit Viriyayudhakorn
CEO, iApp Technology

The followings are slide presentation for ITS484: Mobile App Development, SIIT, Thammasat University, Thailand (1/2016)

  1. Walkthrough guides for setup ES6 develop environment in Mac by using Babel
  2. Walkthrough guides setup ESLint to check the JavaScript style guide.
  3. Teach Modern JavaScript programming language (ES6/ES2015)
  4. Teach how to write ES6/ES2015 with correct style guides (be the best practices from day one) based on Airbnb

Source code Git repository: https://github.com/kobkrit/react-native-class-2017

Quiz Submission Form: https://goo.gl/forms/TWoTk9nic5dY2r0F2

Quiz Submission Form Short: http://bit.ly/2kuKvlM

[React Native 1] Introduction to React-Native

· 阅读需 2 分钟
Kobkrit Viriyayudhakorn
CEO, iApp Technology

Hello, everyone. I am Kobkrit Viriyayudhakorn. This series, I will teach you how to make the mobile application in both iOS and Android by React-Native.

Here is the Course Outline

Course Outline of ITS485

Here is the first lecture.

React Native is a new technology that allows building real mobile apps using only JavaScript. It is a JavaScript framework for writing, debugging, and deploying both iOS and Android mobile applications with native experience. React-Native allows developers to share about 80% of code between iOS and Android which make the development is 5x faster than traditional means. React-Native libraries are created by Facebook released in March 2015. It was proven by many world-class mobile applications, such as Facebook, Facebook Ads Manager, TaskRabbit, QQ, Discord, SoundCloud, etc.

React-Native vs Ionic Framework Comparison

React-Native Walk-through Installation Videos

[React Native 0] Set up React Native on Mac for iOS and Android DevelopmentThe followings are walkthrough guide for setup react-native on Mac for iOS and Android mobile app development.medium.com

[React Native 0] React-Native Setup on Windows for Android Development WalkthroughAndroid DevelopmentWalkthrough Android Developmentmedium.com

How to accept all friend invitations on Linkedin at once.

· 阅读需 2 分钟
Kobkrit Viriyayudhakorn
CEO, iApp Technology

6

I get about 100+ Linkedin friend invitations from many people every week. I think they wish to connect with me for some reasons so I often accept it. But with the high amount of invitations, click the accept button one-by-one is too slow and waste of my time. To make it super fast (within 2 seconds), I use the JavaScript trick to make the browser click all 100+ of accept invitation buttons for me programmatically.

Here is the step.

  1. Visit the Linkedin Website and click on the invitation notification on the top right.

  2. Click on the lovely “See all >” link.

  3. Scroll down the list of pending invitations page. You will see about 20 of pending invitation boxes. Click “-See more-” to show more the invitation boxes in the page. Click “-See more-” repeatedly until you feel it enough. All visible invitation boxes that you see in the page will be accepted automatically by the JavaScript code in the next step.

  4. In Chrome, Press F12 in Windows or Option-Command-I in Mac, to open the Chrome Developer Panel. Click on the Console tab. It is the JavaScript console panel. Copy and paste the following codes and press Enter to execute the code.

var x = document.getElementsByClassName(‘bt-invite-accept’); for (var i=0 ; i<x.length; i++) x[i].click();

  1. That’s it. Browser is clicking all buttons for us. It takes about 2–3 seconds to complete. The number of pending invitation is swiftly reduce. You can see the changes on the page. Hoo ray~! No more accepting invitation buttons (aka works) to do.

In contrast, if you wish to reject all invitations at once, just use this codes instead…

var x = document.getElementsByClassName(‘bt-invite-decline’); for (var i=0 ; i<x.length; i++) x[i].click();